CSS-gradienttigeneraattori
Suunnittele lineaarisia ja säteittäisiä liukuvärejä visuaalisesti ja kopioi käyttövalmis CSS. Kaikki päivittyy reaaliajassa selaimessasi.
CSS-liukuvärin luominen
- Valitse lineaarinen tai säteittäinen ja määritä lineaarisen liukuvärin kulma.
- Valitse pisteiden värit ja määritä kunkin sijainti väliltä 0–100.
- Lisää tai poista pisteitä muokataksesi siirtymää haluamallasi tavalla.
- Kopioi luotu CSS tyylitiedostoosi tai style-määritteeseesi.
UKK
Mikä on lineaarinen liukuväri?
Lineaarinen liukuväri sekoittaa värit suoralla viivalla valitsemassasi kulmassa välillä 0–360 astetta.
Mikä on säteittäinen liukuväri?
Säteittäinen liukuväri sekoittaa värejä keskipisteestä ulospäin ympyrän tai ellipsin muodossa.
Mitä sijaintinumerot tarkoittavat?
Sijainti on prosenttiosuus liukuvärin pituudesta: 0 % alussa ja 100 % lopussa. Pisteet järjestetään automaattisesti sijainnin mukaan.
Toimiiko liukuväri kaikissa selaimissa?
Kyllä. Luotu CSS käyttää standardeja linear-gradient- ja radial-gradient-funktioita, joita kaikki nykyaikaiset selaimet tukevat.
Liittyvät työkalut
Miksi käyttää liukuvärigeneraattoria?
Suunnittele tasaisia värisiirtymiä visuaalisesti CSS Gradient Generatorilla sen sijaan, että arvailisit koodin arvoja, ja kopioi tuotantokelpoinen CSS heti.
- Näe liukuvärin muuttuvan reaaliajassa, kun säädät värejä, kulmia ja pisteitä.
- Kopioi täsmällinen ja kelvollinen CSS ilman syntaksivirheiden etsimistä.
- Luo monipisteisiä taustoja painikkeisiin, bannereihin ja osioihin sekunneissa.
Vinkit ja rajoitukset
Voit lisätä niin monta väripistettä kuin haluat. Generaattori säilyttää aina vähintään kaksi pistettä, jotta liukuväri on kelvollinen. Pisteet järjestetään sijainnin mukaan ennen CSS:n luomista.