CSS Gradient Generator

Lineaariset värisävyt siirtyvät värejä pitkin suoraa linjaa (vaaka-, pysty- tai diagonaalista linjaa) luoden suuntaisen virtauksen väristä toiseen. Säteittäiset värisävyt säteilevät keskipisteestä ulospäin ympyrän tai ellipsin muotoisena kuviona. Käytä lineaarisia värisävyjä suunnan korostamiseen ja moderneihin käyttöliittymiin ja säteittäisiä värisävyjä valokeilatehosteisiin, painikkeisiin tai orgaaniseen visuaaliseen kiinnostavuuteen.

Voit määrittää kaltevuuskulman asteina (0 asteesta 360 asteeseen) tai käyttää avainsanoja, kuten 'oikealle', 'alas', 'oikealle ylös' jne. 0 astetta osoittaa ylöspäin, 90 astetta osoittaa oikealle, 180 astetta osoittaa alaspäin ja 270 astetta osoittaa vasemmalle. Kulma määrittää akselin, jota pitkin värit siirtyvät, ja antaa sinulle täydellisen hallinnan kaltevuuden suunnasta.

Kyllä! CSS-gradientit tukevat rajattomasti väripysähdyksiä. Voit lisätä useita värejä luodaksesi monimutkaisia, monivärisiä kaltevuuksia. Jokaisella värillä voi olla valinnainen sijaintiprosentti (0 % - 100 %), jolla voit säätää, missä se näkyy kaltevuudessa. Tämä sopii täydellisesti sateenkaaritehosteiden, auringonlaskujen tai hienostuneiden värisiirtymien luomiseen.

Käytä kahta värisävyltään, kylläisyydeltään tai vaaleudeltaan lähellä toisiaan olevaa väriä. Siirry esimerkiksi keskisinisestä sinisestä hieman vaaleampaan tai tummempaan siniseen. Pidä kontrasti matalana ja harkitse HSL-arvojen käyttöä, jolloin säädät vaaleutta vain 10-20 %. Hienovaraiset kaltevuudet lisäävät syvyyttä ja visuaalista kiinnostavuutta ilman, että sisältö on ylivoimainen.

Nykyaikaisia CSS-gradientteja (lineaarinen-gradientti ja radiaalinen-gradientti) tuetaan kaikissa nykyisissä selaimissa ilman valmistajan etuliitteitä. Jos sinun on kuitenkin tuettava hyvin vanhoja selaimia (IE9 ja aikaisemmat), saatat tarvita valmistajan etuliitteitä (-webkit-, -moz-, -o-) tai varavärejä. Nykyaikaisessa web-kehityksessä CSS:n standardisävyjen syntaksi toimii kaikkialla.

Aseta väripysäkit tasaisesti ja vältä rajuja värien hyppäyksiä. Käytä väripysähdyksiä äärimmäisten värien välissä pehmeämpien siirtymien luomiseksi. Kokeile säteittäisten kaltevuuksien muotoa (ympyrä vs. ellipsi) ja sijaintia. Harkitse sellaisten värien käyttöä, joiden kylläisyys- ja vaaleusarvot ovat samankaltaiset, tai työskentele HSL-avaruudessa, jossa voit luoda tasaisia sävyjen siirtymiä.

Säteittäiset kaltevuudet voivat olla ympyränmuotoisia (yhtä suuria kaikkiin suuntiin) tai elliptisiä (venytetty säiliöön sopivaksi). Ympyrät sopivat hyvin valokeilatehosteisiin ja keskitettyihin muotoiluihin, kun taas ellipsit ovat parempia taustoihin, joiden on peitettävä suorakulmaiset alueet tasaisesti. Shape-parametrin avulla voit hallita tätä käyttäytymistä.

Kyllä! Käytä kulmia välillä 0 ja 360 astetta diagonaalisia kaltevuuksia varten. 45 astetta luo täydellisen diagonaalin alhaalta vasemmalta ylhäältä oikealle, 135 astetta alhaalta oikealta ylhäältä vasemmalle. Diagonaaliset kaltevuudet lisäävät dynaamista visuaalista mielenkiintoa ja voivat ohjata silmääsi suunnittelun läpi.

Käytä RGBA- tai HSLA-väriformaatteja, joissa on alfakanava, luodaksesi läpinäkyviksi häipyviä kaltevuuksia. Tämä sopii erinomaisesti päällekkäisvaikutelmiin, kuvanaamareihin tai syvyyden luomiseen. Esimerkiksi gradientti rgba(0,0,0,0,1) - rgba(0,0,0,0,0) luo häivytyksen läpinäkyvään mustaan.

Väripysäkit määrittävät, missä kukin väri näkyy kaltevuudessa (0-100 %). Tasainen väli luo tasaisia siirtymiä, kun taas pysäkkien niputtaminen yhteen luo teräviä värimuutoksia. Esimerkiksi kahden värin sijoittaminen 50 %:n välein luo kovan viivan, kun taas värien sijoittaminen 40 %:n ja 60 %:n välein luo pehmeän sekoituksen.