Generátor gradientov CSS

Lineárne gradienty prechádzajú farby pozdĺž priamky (horizontálnej, vertikálnej alebo diagonálnej) a vytvárajú smerový tok od jednej farby k druhej. Radiálne gradienty vyžarujú zo stredového bodu smerom von v kruhovom alebo eliptickom vzore. Lineárne gradienty používajte na zdôraznenie smeru a moderné rozhrania a radiálne gradienty na efekty bodového svetla, tlačidlá alebo organický vizuálny záujem.

Uhol sklonu môžete nastaviť v stupňoch (od 0 do 360 stupňov) alebo použiť kľúčové slová ako "doprava", "dole", "vpravo hore" atď. 0 stupňov ukazuje nahor, 90 stupňov ukazuje doprava, 180 stupňov ukazuje nadol a 270 stupňov ukazuje doľava. Uhol určuje os, pozdĺž ktorej farby prechádzajú, čo vám dáva úplnú kontrolu nad smerom gradientu.

Áno! Prechody CSS podporujú neobmedzený počet farebných stôp. Môžete pridať viacero farieb a vytvoriť tak zložité viacfarebné gradienty. Každá farba môže mať voliteľnú percentuálnu pozíciu (0 % až 100 %), aby ste mohli ovládať, kde sa v gradiente zobrazí. To je ideálne na vytváranie dúhových efektov, gradientov pri západe slnka alebo sofistikovaných farebných prechodov.

Použite dve farby, ktoré majú blízky odtieň, sýtosť alebo svetlosť. Napríklad prejdite zo stredne modrej na o niečo svetlejšiu alebo tmavšiu modrú. Udržujte nízky kontrast a zvážte použitie hodnôt HSL, pri ktorých upravíte svetlosť len o 10-20 %. Jemné gradienty dodávajú hĺbku a vizuálnu zaujímavosť bez toho, aby zahltili obsah.

Moderné gradienty CSS (pomocou lineárneho gradientu a radiálneho gradientu) sú podporované vo všetkých súčasných prehliadačoch bez predpon výrobcu. Ak však potrebujete podporovať veľmi staré prehliadače (IE9 a staršie), môžete potrebovať prefixy dodávateľa (-webkit-, -moz-, -o-) alebo záložné plné farby. Pri vývoji moderných webových stránok funguje všade štandardná syntax gradientov CSS.

Farebné zastávky umiestnite rovnomerne a vyhnite sa výrazným farebným skokom. Na vytvorenie plynulejších prechodov medzi extrémnymi farbami používajte medzibarvy. Pri radiálnych gradientoch experimentujte s tvarom (kruh vs. elipsa) a polohou. Zvážte použitie farieb s podobnými hodnotami sýtosti a svetlosti alebo prácu v priestore HSL, kde môžete vytvoriť plynulé prechody odtieňov.

Radiálne gradienty môžu byť kruhové (rovnaké vo všetkých smeroch) alebo eliptické (roztiahnuté tak, aby sa zmestili do kontajnera). Kruhy sa dobre hodia na efekty bodového svetla a vycentrované návrhy, zatiaľ čo elipsy sú lepšie na pozadia, ktoré musia rovnomerne pokrývať obdĺžnikové plochy. Parameter tvaru umožňuje toto správanie ovládať.

Áno! Pre diagonálne gradienty použite uhly od 0 do 360 stupňov. 45 stupňov vytvára dokonalú diagonálu od ľavého dolného rohu po pravý horný, 135 stupňov ide od pravého dolného rohu po ľavý horný. Diagonálne gradienty dodávajú dynamický vizuálny záujem a môžu viesť oko cez váš dizajn.

Na vytvorenie gradientov, ktoré sa zmenia na priehľadné, použite formáty farieb RGBA alebo HSLA s kanálom alfa. To je ideálne na prekrývacie efekty, masky obrázkov alebo vytváranie hĺbky. Napríklad gradient z rgba(0,0,0,1) do rgba(0,0,0,0) vytvorí prechod do priehľadnej čiernej.

Farebné zarážky určujú, kde sa jednotlivé farby v gradiente zobrazia (0 % až 100 %). Rovnomerné rozmiestnenie vytvára plynulé prechody, zatiaľ čo zoskupenie zarážok vytvára ostré zmeny farieb. Napríklad umiestnenie dvoch farieb na 50 % vytvorí tvrdú líniu, zatiaľ čo ich rozmiestnenie na 40 % a 60 % vytvorí plynulé prelínanie.