CSS gradiens generátor
Lineáris és radiális CSS gradiensek készítése élő előnézettel és kész, másolható kóddal. Színpontok, szög, pozíciók. Böngészőben, privát.
Miről szól ez az eszköz?
A CSS gradiens generátor vizuálisan, élő előnézettel készít lineáris és radiális színátmeneteket, és azonnal adja a kész CSS kódot. Add hozzá a színpontokat, állítsd a szöget és a pozíciókat, majd másold a CSS-t egy kattintással. Webdesignereknek és fejlesztőknek, akiknek gyorsan, kézi kódolás nélkül kell szép háttér-átmenet.
Hogyan használd a(z) CSS gradiens generátor-t?
-
Típus választása
Lineáris (egyenes mentén) vagy radiális (középpontból kifelé) átmenet.
-
Irány beállítása
Lineárisnál a szög csúszkával (0–360°) adod meg az átmenet irányát.
-
Színpontok
Szín és pozíció minden ponthoz; pontot hozzáadhatsz vagy eltávolíthatsz.
-
CSS másolása
A kész background szabályt egy kattintással a vágólapra másolod.
Mikor van rá szükséged?
-
Hátterek
Hero szekciók, kártyák és gombok modern, lágy színátmenetes háttere.
-
Designkísérlet
Színkombinációk és átmenetek gyors kipróbálása élő előnézettel.
-
Gombstílusok
Figyelemfelkeltő, átmenetes gombok és CTA-elemek készítése.
-
Modern UI
Glassmorphism és élénk, átmenetes felületek alapja a mai webdesignban.
Gradiens típusok
| Típus | Irány | CSS függvény |
|---|---|---|
| Lineáris | Egyenes, szöggel | linear-gradient() |
| Radiális | Középpontból kifelé | radial-gradient() |
A CSS gradiensekről
A CSS gradiens egy folytonos színátmenet, amelyet a böngésző képként kezel, de valójában kód generálja – így éles marad bármilyen felbontáson, és nem terheli a betöltést külön képfájllal. Két alaptípusa a lineáris (egy egyenes mentén) és a radiális (egy pontból sugárirányban), és tetszőleges számú színpontból állhat.
Minden színpontnak van egy színe és egy opcionális pozíciója (0–100%), ami megmondja, hol fejtődik ki teljesen az adott szín; a köztes területeken a böngésző folytonosan keveri a szomszédos színeket. A lineáris átmenet szöge szabja meg az irányt, a 12 órás iránytól az óramutató járásával egyezően mérve.
Hasznos tippek
-
Két közeli árnyalat (pl. ugyanazon szín világosabb és sötétebb verziója) finom, elegáns átmenetet ad.
-
A 135°-os szög (átlós, balról-fentről jobbra-le) az egyik legnépszerűbb, kiegyensúlyozott irány.
-
Adj meg egy tartalék háttérszínt is a gradiens előtt, hogy nagyon régi böngészőkben is legyen háttér.
-
A generálás a böngésződben fut – nincs szerver, nincs feltöltés, csak a kész CSS.
Gyakori kérdések
- A lineáris egy egyenes mentén, a megadott szög irányában megy; a radiális egy középpontból sugárirányban terjed kifelé.
- Legalább kettő, ebben az eszközben legfeljebb hat – mindegyik saját színnel és 0–100% közötti pozícióval.
- A lineáris átmenet egy egyenes mentén megy egyik színből a másikba (a szög határozza meg az irányt). A radiális átmenet egy középpontból sugárirányban terjed kifelé, koncentrikus körökben.
- Legalább kettőt, és ebben az eszközben legfeljebb hatot. Minden színpontnak van egy színe és egy pozíciója 0 és 100% között, ahol az adott szín teljesen kifejtődik.
- A lineáris gradiens iránya: 0° felfelé, 90° jobbra, 180° lefelé, 270° balra mutat. A CSS a 12 órás iránytól, az óramutató járásával egyezően méri.
- Bárhol, ahol CSS háttér adható meg: a background tulajdonságban, egy CSS osztályban vagy inline stílusban. A modern böngészők mind támogatják a CSS gradienst.
- Igen, a lineáris és radiális CSS gradienst minden modern böngésző natívan támogatja, előtag (prefix) nélkül. Nagyon régi böngészőkhöz tartalék (fallback) háttérszínt érdemes megadni.
- Igen, teljesen kliensoldalon – semmilyen adat nem kerül szerverre.