CSS gradiens generátor

Válassza ki a szín és szög, majd előnézetben tekintse meg a CSS gradiens kódját

FrissítésekCSS gradiens generátor hozzáadva, szín és szög kiválasztásával kód generálhatóFrissítések megtekintése

Jellemzők

Előnézet és kód egyidejű frissítése

A szín vagy szög változtatásakor az előnézet és a CSS egyszerre módosul

Lineáris, radiális és kúpos gradiens támogatás

Szög, forma és középpont pontosan beállítható az egyes típusoknál

Akár 10 szín húzással igazítható

A szín pozícióját a sávon húzva, az átlátszóságot csúszkával módosíthatja

8 sablon és véletlenszerű generálás

A klasszikus vagy véletlenszerű színsémákból indulva finomítson

Használat

Válassza ki a típust

Válassza ki a gradiens típusát a lineáris, radiális vagy kúpos közül

Határozza meg a színt

Válassza ki a színt a kódból vagy sablonból, adjon hozzá színeket az "Szín hozzáadása" gombbal, majd módosítsa a pozíciót és átlátszóságot

Állítsa be az irányt

Lineáris: szög vagy irány gombok, radiális/kúpos: középpont megadása

Másolja ki a kódot

A "Másolás" gombbal másolja az egyetlen soros CSS-t a stílusaihoz

Felhasználási esetek

Hőskép háttérképe

Az oldal tetejének vagy gombok hátterének beállítása kód nélkül

Blog címsor színkiválasztása

Válasszon hasonló sablont, hogy beállítsa a cikk fejléc hátterét

Fénykép fölé helyezett réteg

Hozzon létre félig átlátszó réteget csökkentett átlátszósággal a fénykép felett

Többszínű gradiens beállítása

Húzzon a 3 vagy több szín közötti határok helyzetét, hogy fokozatosan finomítson

Alapismeretek

A linear, radial és conic közötti különbség

A CSS gradiensei 3 különböző függvényt kínálnak, amelyeket a background tulajdonságba írhatunk.

linear-gradient：A linear-gradient lineáris gradiens, amely egy megadott szög mentén változtatja a színt.
radial-gradient：A radial-gradient radiális gradiens, amely a középpontból kifelé kör vagy ellipszis alakban terül el.
conic-gradient：A conic-gradient kúpos gradiens, amely az középpont körül az óramutató járásával megegyezően változtatja a színt.

Szög és irány kulcsszavak megfelelése

A linear-gradient szögénél a 0 fok alulról felfelé mutat, és az érték növekedésével az óramutató járásával megegyezően forog. Az "to right" iránykulcsszóval is írható, a 90 fok megegyezik az "to right", a 180 fok pedig az "to bottom" irányával.

Szín leállási pontok és átlátszóság írása

A szín leállási pont (color stop) azt mutatja, hogy a gradiens mely helyén lesz az adott szín, a 0% a kezdőpont, a 100% a végpont. Például: "#3B82F6 0%, #8B5CF6 100%" azt jelenti, hogy a kék kezdőpontból a lila végpontig halad a szín változása.

#RRGGBB formátum：A #RRGGBB formátum a szín írásának módja, ahol a piros, zöld és kék erősségét egyenként 2 számjegyes hexadecimális számokkal adjuk meg; a #FF0000 az átlátszatlan vörös.
rgba formátum：Az rgba formátum a szín írásának módja, amely a piros, zöld és kék értékeihez (0–255) hozzáadja az átlátszóságot (0–1); a 0,5 átlátszóság félig átlátszó színt jelent.