CSS színátmenet generátor
Lineáris vagy radiális színátmenet készítése és a CSS kód másolása.
Köszönjük! Ez segít jobbá tenni az eszközöket.
Most nem sikerült elküldeni. Próbáld később.
A CSS színátmenet generátor lineáris vagy radiális átmenetes hátteret készít két vagy három színből, és kész, másolható kódot ad. A színeket színválasztóval adod meg, beállítod a szöget, az előnézet azonnal frissül. A kód előtag nélkül működik minden mai böngészőben.
Beállítások
- 1. és 2. szín, valamint opcionális 3. szín, amelyet jelölőnégyzettel kapcsolsz be. A színek egyenletesen oszlanak el.
- Lineáris: a színek a szög által megadott irányban mennek át egymásba.
- Radiális: középről kifelé, körben. Itt a szög nem számít.
- Szög 0 és 360 fok között.
Hogyan működik a szög
| Szög | Irány |
|---|---|
| 0deg | alulról felfelé |
| 90deg | balról jobbra |
| 135deg | bal felső saroktól a jobb alsóig |
| 180deg | fentről lefelé |
Példa
A #0f5c4d zöld, a #f4d35e sárga és 135 fok esetén ezt kapod:
background: #0f5c4d; background: linear-gradient(135deg, #0f5c4d, #f4d35e);
Az első sor tartalék: ha egy program vagy levelezőkliens nem érti az átmenetet, legalább egyszínű hátteret mutat. Harmadik fehér színnel radiálisan: radial-gradient(circle, #0f5c4d, #f4d35e, #ffffff).
Tervezési tippek
A színkörön egymáshoz közeli színek mutatnak jól. Két ellentétes szín, például piros és zöld, középen szürkés-barnás sávon megy át. Ha szöveg kerül az átmenetre, mindkét végén ellenőrizd a kontrasztot a színkód átváltóval. Összeillő színeket a színpaletta generátor ad.
Gyakori kérdések
Hogyan készítek színátmenetes hátteret CSS-ben?
Válaszd ki a színeket és a szöget, másold a két generált sort, és tedd az elem CSS-szabályába.
Mi a különbség a lineáris és a radiális átmenet között?
A lineáris egy irányban vált színt, a radiális középről kifelé, körben.
Tehetek színátmenetet szövegre?
Igen, de nem közvetlenül ezzel a kóddal: háttérként adod meg, majd -webkit-background-clip: text és color: transparent kell ugyanarra az elemre.
Frissítve:
Milyen eszköz hiányzik?
Írd meg, milyen kalkulátort vagy eszközt kerestél, de nem találtál. Minden javaslatot elolvasunk.