Generátor CSS gradientů

Jak používat generátor CSS gradientů

1. Vyber Typ gradientu: Lineární, Radiální nebo Kuželový. Velký náhled nahoře se aktualizuje při každé změně.
2. U lineárního gradientu nastav Úhel posuvníkem nebo ho napiš ve stupních (90° vede zleva doprava, 180° shora dolů). U kuželového gradientu je úhel místem, kde výseč začíná.
3. U radiálního a kuželového gradientu přesuň střed pomocí Střed X a Střed Y. Radiální gradient může být Kruh nebo Elipsa (nabídka Tvar).
4. Uprav Barevné zarážky. Kliknutím kamkoli na pruh přidáš zarážku s barvou, kterou gradient v tom bodě už má, nebo použij Přidat zarážku, která vyplní největší mezeru. Tažením úchytu ji přesuneš. Každá zarážka má také řádek, kde vybereš její barvu, napíšeš libovolnou barvu CSS, nastavíš její Polohu (%) nebo ji Odstraníš (gradient si ponechává alespoň dvě zarážky).
5. Volitelně zaškrtni Opakující se, vyber Interpolaci barev, klikni na Obrátit pro převrácení zarážek nebo na Náhodný gradient pro inspiraci.
6. Výsledek zkopíruješ z Kódu CSS tlačítkem Kopírovat.

Klávesnice: vyber úchyt na pruhu a šipkami ho posouváš o 1 % (se Shiftem o 10 %), klávesami Home a End skočíš na konce a klávesou Delete ho odstraníš.

Nástroj funguje ve tvém prohlížeči. Nic, co zadáš, se neodesílá na server.

Tři funkce gradientů

• linear-gradient() prolíná barvy podél přímky. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) vede od indigové vlevo k růžové vpravo. Úhly se měří po směru hodinových ručiček od vrcholu: 0deg míří nahoru, 90deg doprava.
• radial-gradient() se šíří od středového bodu. radial-gradient(circle at 30% 40%, …) umístí střed 30 % zleva a 40 % shora. Elipsa se roztahuje s boxem, kruh zůstává kulatý.
• conic-gradient() se otáčí kolem středu jako ručičky hodin. conic-gradient(from 0deg at 50% 50%, …) vytváří barevná kola, koláčové grafy a efekty načítání. Polohy zarážek jsou podíly celého oběhu.

Volba Opakující se používá repeating-linear-gradient() a její sourozence: vzor definovaný tvými zarážkami se opakuje, dokud se box nevyplní. Dej poslední zarážku výrazně pod 100 % (například 20 %) a uvidíš pruhy nebo kruhy.

Dvě zarážky na stejné poloze vytvoří ostrou hranu místo prolnutí, tak se dělají pruhy a vlajky. Generátor v kódu udržuje zarážky seřazené podle polohy, jak CSS vyžaduje.

Interpolace sRGB, nebo OKLCH

Prohlížeče standardně prolínají barvy gradientu v sRGB. Mezi dvěma sytými barvami, například modrou a žlutou, to často vytvoří matnou šedou nebo špinavou střední část. CSS Color Level 4 umožňuje vybrat prostor interpolace: linear-gradient(90deg in oklch, …) prolíná v percepčním prostoru OKLCH a udržuje střed živý.

S volbou OKLCH (plynulejší, se zálohou sRGB) nástroj zapíše dvě deklarace background: nejprve klasickou verzi sRGB, pak verzi OKLCH. Prohlížeče, které podporují prostory interpolace (Chrome a Edge 111+, Safari 16.2+, Firefox 127+), použijí druhý řádek; starší ho ignorují a drží se prvního.

Tipy

• Barvy s průhledností se v polích zarážek přijímají, například #00000080 nebo rgb(0 0 0 / 50%), což se hodí pro překryvy na obrázcích.
• Kód je zapsán pomocí background. Pokud ostatní vlastnosti pozadí nastavuješ zvlášť, použij místo toho background-image.
• Decentní gradienty (dva blízké odstíny jedné barvy) obvykle vypadají profesionálněji než duhová prolnutí.