CSS Gradient generátor

Mi ez az eszköz?

A CSS gradiensek a böngésző által egy színlistából generált képek, nem feltöltött fájlok — a linear-gradient() adott szögben, egyenes vonal mentén megy át színek között, míg a radial-gradient() egy középpontból kifelé halad a színek között. Mindkettő két vagy több színátmenet-pontot fogad el, amelyek mindegyike opcionálisan rögzíthető egy pozícióhoz a gradiensen belül.

Kézzel írva a gradiensekben könnyű finoman elrontani valamit: a pontok sorrendje, hiányzó százalékok, vagy egy rossz irányba mutató szögérték (a CSS szögek az óramutató járásával megegyező irányban futnak a 'to top'-tól, ellentétben a matematikai szögekkel). Ez az eszköz kívül tartja a szintaxist — állítsd be a színeket és pozíciókat választókkal és csúszkákkal, nézd, ahogy az előnézeti doboz valós időben frissül, majd másold ki a végleges CSS-t, ha jónak tűnik.

Forrás: CSS Images Module Level 3, W3C — a specifikáció, amely definiálja a linear-gradient() és radial-gradient() szintaxist.

Miért érdemes használni?

• Az élő előnézet azonnal frissül minden szín-, pozíció- és szögváltozásra — nincs szükség oldal újratöltésre az eredmény megtekintéséhez.
• Válts lineáris és radiális gradiens között egy kattintással; a szögbeállító automatikusan elrejtőzik radiális gradiensnél, ahol nem alkalmazható.
• Adj hozzá vagy vegyél el színátmenet-pontokat (2-től 4-ig) ahelyett, hogy egy fix, kétszínű gradiensre lennél korlátozva.
• Minden pontnak saját pozíciócsúszkája van, így a pontoknak nem kell egyenletesen elosztva lenniük.
• Beillesztésre kész CSS-t ad ki, a szabványos linear-gradient()/radial-gradient() szintaxist használva.
• Teljes egészében a böngésződben fut — semmi, amit beállítasz, nem kerül feltöltésre sehova. Ingyenes, nincs regisztráció, mobilon is működik.

Használati útmutató

1. Válaszd a Linear vagy Radial gradienstípust.
2. Lineáris gradiensnél húzd a szögcsúszkát — 90 fok balról jobbra megy, 180 fok fentről lefelé, és így tovább.
3. Állítsd be a színt és pozíciót minden ponthoz; az első pont a gradiens kezdőszíne, az utolsó a végszíne.
4. Kattints a '+ Pont hozzáadása' gombra, hogy legfeljebb 4 pontig bővítsd egy többszínű gradienshez, vagy a ✕ gombra egy eltávolításához (minimum 2).
5. Másold ki a generált CSS-t, és illeszd be egy background vagy background-image deklarációba.

Példa

Bemenet

Lineáris · Szög: 90 fok · Pontok: #f97316 0%-nál, #ec4899 100%-nál

Kimenet

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

Egy balról jobbra tartó narancssárga-rózsaszín gradiens — gyakori stílus gombokhoz, bannerekhez és hero hátterekhez.

Lineáris vs. radiális gradiensek

Egy lineáris gradiens egyenes vonal mentén megy át színek között, egy szög által szabályozva — hasznos bannerekhez, gombokhoz és irányított háttérekhez. Egy radiális gradiens egy középpontból kifelé, táguló gyűrűkben megy át színek között, ami reflektorfény-effektekhez, jelvényekhez vagy fényglóriás hátterekhez illik. Ez az eszköz a radiális gradienst alapértelmezetten kör alakúra, a dobozban központosítva állítja be, ami a leggyakoribb radiális felhasználási esetet fedi le; a CSS ellipszis alakokat és nem középpontos pozíciókat is támogat, ha kézzel tovább szeretnéd szerkeszteni a kimenetet.

Gyakori gradiens minták

• Finom márka-akcentus: két közeli árnyalat (pl. ugyanazon szín két árnyalata) sekély szögben egy lágy háttérmosáshoz.
• Nagy kontrasztú CTA gomb: két telített, egymást kiegészítő szín 90 vagy 135 fokban egy merész, kattintható megjelenésért.
• Fedés egy képen: egy gradiens átlátszóból egy tömör színbe (állítsd be az átlátszóságot rgba színnel a választó alapul szolgáló hex-je alatt, vagy módosítsd másolás után) egy background-image fölé rétegezve.
• Többpontos szivárvány/márka gradiens: 3–4 pont a teljes 0–100% tartományban elosztva, simább, fokozatosabb átmenetekért, mint amit egy kétszínű gradiens megenged.
• Radiális reflektorfény: egy fényes középpont 0% közelében, amely egy sötétebb szélpontra halványul 100% közelében, hasznos hero szekciókhoz vagy kártya-kiemelésekhez.

Párosítás más CSS eszközökkel

A gradienseket gyakran kombinálják lekerekített sarkokkal és árnyékokkal ugyanazon az elemen — egy gradiens kártya lágy box-shadow-val és lekerekített sarkokkal gyakori UI minta. Generáld le mindegyik részt külön, majd kombináld a CSS deklarációkat az elemen.

→ Box Shadow Generátor · Border Radius Generátor · Színválasztó

Gyakori kérdések