Generátor CSS gradientov

Ako používať generátor CSS gradientov

1. Vyber Typ gradientu: Lineárny, Radiálny alebo Kužeľový. Veľký náhľad hore sa aktualizuje pri každej zmene.
2. Pri lineárnom gradiente nastav Uhol posuvníkom alebo ho zadaj v stupňoch (90° ide zľava doprava, 180° zhora nadol). Pri kužeľovom gradiente je uhol miestom, kde sa rozmietanie začína.
3. Pri radiálnom a kužeľovom gradiente posúvaj stred pomocou Stred X a Stred Y. Radiálny gradient môže byť Kruh alebo Elipsa (ponuka Tvar).
4. Uprav Farebné zarážky. Kliknutím kamkoľvek na pruh pridáš zarážku s farbou, ktorú gradient v tom mieste už má, alebo použi Pridať zarážku na vyplnenie najširšej medzery. Potiahnutím úchytu zarážku presunieš. Každá zarážka má aj riadok, kde vyberieš jej farbu, zadáš ľubovoľnú farbu CSS, nastavíš jej Polohu (%) alebo ju Odstrániť (gradient si ponechá aspoň dve zarážky).
5. Voliteľne zapni Opakujúci sa, vyber Interpoláciu farieb, klikni na Obrátiť pre prevrátenie zarážok alebo na Náhodný gradient pre inšpiráciu.
6. Výsledok skopíruješ z Kódu CSS tlačidlom Kopírovať.

Klávesnica: aktivuj úchyt na pruhu, potom šípkami posúvaj o 1 % (so Shiftom o 10 %), klávesmi Home a End skoč na konce a Delete ho odstráň.

Nástroj funguje v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Tri funkcie gradientov

• linear-gradient() plynulo mieša farby pozdĺž priamky. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) ide od indiga vľavo po ružovú vpravo. Uhly sa merajú v smere hodinových ručičiek od vrchu: 0deg smeruje nahor, 90deg doprava.
• radial-gradient() sa šíri zo stredového bodu. radial-gradient(circle at 30% 40%, …) umiestni stred 30 % zľava a 40 % zhora. Elipsa sa natiahne s rámčekom, kruh zostane okrúhly.
• conic-gradient() sa točí okolo stredu ako ručičky hodín. conic-gradient(from 0deg at 50% 50%, …) vytvára farebné kolesá, koláčové grafy a efekty načítavania. Polohy zarážok sú podiely plného otočenia.

Voľba Opakujúci sa používa repeating-linear-gradient() a súrodencov: vzor definovaný tvojimi zarážkami sa opakuje, kým sa rámček nevyplní. Poslednú zarážku daj výrazne pod 100 % (napríklad 20 %) a uvidíš pásy alebo prstence.

Dve zarážky na rovnakej polohe vytvoria ostrú hranu namiesto prechodu, čím vznikajú pásy a vlajky. Generátor v kóde udržiava zarážky zoradené podľa polohy, ako to CSS vyžaduje.

Interpolácia sRGB alebo OKLCH

Prehliadače predvolene miešajú farby gradientu v sRGB. Medzi dvoma sýtymi farbami, napríklad modrou a žltou, to často vytvorí matnú sivú alebo špinavú stredovú časť. CSS Color Level 4 umožňuje vybrať priestor interpolácie: linear-gradient(90deg in oklch, …) mieša v percepčnom priestore OKLCH a udrží stred živý.

Pri voľbe OKLCH (plynulejšia, so záložným sRGB) nástroj zapíše dve deklarácie background: najprv klasickú verziu sRGB, potom verziu OKLCH. Prehliadače, ktoré podporujú priestory interpolácie (Chrome a Edge 111+, Safari 16.2+, Firefox 127+), použijú druhý riadok; staršie ho ignorujú a ponechajú prvý.

Tipy

• V poliach zarážok sa prijímajú aj farby s priehľadnosťou, napríklad #00000080 alebo rgb(0 0 0 / 50%), čo sa hodí pri prekrytiach na obrázkoch.
• Kód je zapísaný pomocou background. Ak ostatné vlastnosti pozadia nastavuješ samostatne, použi radšej background-image.
• Jemné gradienty (dva blízke odtiene jednej farby) zvyčajne pôsobia profesionálnejšie než dúhové prechody.