Generátor gradientů CSS

Lineární gradienty přecházejí barvy podél přímky (vodorovné, svislé nebo diagonální) a vytvářejí směrový tok od jedné barvy k druhé. Radiální gradienty vyzařují ze středového bodu směrem ven v kruhovém nebo eliptickém vzoru. Lineární gradienty používejte pro zdůraznění směru a moderní rozhraní a radiální gradienty pro efekty bodového světla, tlačítka nebo organický vizuální zájem.

Úhel sklonu můžete nastavit ve stupních (0° až 360°) nebo použít klíčová slova jako "doprava", "dolů", "vpravo nahoru" atd. 0 stupňů ukazuje nahoru, 90 stupňů ukazuje doprava, 180 stupňů ukazuje dolů a 270 stupňů ukazuje doleva. Úhel určuje osu, podél které barvy přecházejí, a dává vám tak úplnou kontrolu nad směrem gradientu.

Ano! Přechody CSS podporují neomezený počet barevných stop. Můžete přidávat více barev a vytvářet tak složité vícebarevné gradienty. Každá barva může mít volitelnou procentuální pozici (0 % až 100 %), která určuje, kde se v gradientu zobrazí. To je ideální pro vytváření duhových efektů, gradientů při západu slunce nebo propracovaných barevných přechodů.

Použijte dvě barvy, které mají blízký odstín, sytost nebo světlost. Například přejděte od středně modré k mírně světlejší nebo tmavší modré. Udržujte nízký kontrast a zvažte použití hodnot HSL, kdy upravíte světlost pouze o 10-20 %. Jemné přechody dodávají hloubku a vizuální zajímavost, aniž by zahlcovaly obsah.

Moderní gradienty CSS (pomocí lineárního gradientu a radiálního gradientu) jsou podporovány ve všech současných prohlížečích bez předpon výrobce. Pokud však potřebujete podporovat velmi staré prohlížeče (IE9 a starší), můžete potřebovat předpony dodavatele (-webkit-, -moz-, -o-) nebo záložní plné barvy. Při vývoji moderních webů funguje všude standardní syntaxe gradientů CSS.

Umístěte barevné zarážky rovnoměrně a vyhněte se drastickým barevným skokům. Mezi extrémními barvami používejte mezibarvy, abyste vytvořili plynulejší přechody. U radiálních gradientů experimentujte s tvarem (kruh vs. elipsa) a polohou. Zvažte použití barev s podobnými hodnotami sytosti a světlosti nebo práci v prostoru HSL, kde můžete vytvořit plynulé přechody odstínů.

Radiální gradienty mohou být kruhové (stejné ve všech směrech) nebo eliptické (roztažené tak, aby se vešly do kontejneru). Kruhy se dobře hodí pro efekty bodového světla a vycentrované návrhy, zatímco elipsy jsou vhodnější pro pozadí, která musí rovnoměrně pokrývat obdélníkové plochy. Parametr shape umožňuje toto chování ovládat.

Ano! Pro diagonální gradienty použijte úhly mezi 0 a 360 stupni. 45 stupňů vytváří dokonalou diagonálu od levého dolního rohu k pravému hornímu rohu, 135 stupňů jde od pravého dolního rohu k levému hornímu rohu. Diagonální gradienty dodávají dynamický vizuální zájem a mohou vést oko po vašem návrhu.

Pomocí barevných formátů RGBA nebo HSLA s alfa kanálem můžete vytvářet gradienty, které se změní na průhledné. To je ideální pro překryvné efekty, masky obrázků nebo vytváření hloubky. Například gradient z rgba(0,0,0,1) do rgba(0,0,0,0) vytvoří přechod do průhledné černé.

Barevné zarážky určují, kde se jednotlivé barvy v gradientu zobrazí (0 % až 100 %). Rovnoměrné rozestupy vytvářejí plynulé přechody, zatímco seskupení zarážek dohromady vytváří ostré změny barev. Například umístění dvou barev na 50 % vytvoří tvrdou čáru, zatímco jejich rozmístění na 40 % a 60 % vytvoří plynulé prolínání.