CSS-gradienttigeneraattori
Luo lineaarisia, säteittäisiä ja kartiomaisia gradientteja live-esikatselulla ja kopiointivalmiilla CSS:illä. Säädä pysähdyksiä, kulmia ja muotoja – liitä sitten tyylisivullesi.
CSS Gradient Generator
LiveCSS output
background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);
Key capabilities
- Luo lineaarisia, säteittäisiä ja kartiomaisia gradientteja live-esikatselulla ja kopiointivalmiilla CSS:illä.
- Toimii selaimessasi
- Ilmainen käyttää
Kuinka käyttää
- Valitse gradientin tyyppi ja kulma tai sijainti.
- Lisää tai muokkaa väripysähdyksiä.
- Kopioi luotu CSS.
How this tool works
- Valitse gradientin tyyppi ja kulma tai sijainti.
- Lisää tai muokkaa väripysähdyksiä.
- Kopioi luotu CSS.
Recommended settings
- Käytä ensin oletusasetuksia ja säädä sitten tarvittaessa
Supported formats
Text / on-page input
File size and limits
- Erittäin monimutkainen monikerroksinen esikatselu saattaa tuntua hitaammalta vanhemmissa puhelimissa.
Privacy
Väri- ja CSS-generaattorit toimivat kokonaan selaimessasi. Esikatselut ja konversiot eivät koskaan lataa tyylejäsi.
Common use cases
- Käytä CSS Gradient Generatoria aina kun tarvitset: Luo lineaarisia, säteittäisiä ja kartiomaisia liukuvärejä live-esikatselulla ja kopiointivalmiilla CSS:illä.
Troubleshooting
Esikatselu näyttää erilaiselta liittämisen jälkeen
Tarkista, onko sivullasi kilpailevaa CSS:ää (nollaukset, periytyneet värit). Kopioi luotu sääntö ensin eristettyyn tyylitaulukkoon.
FAQ
Lataako tämä CSS:ni?
Ei. Generaattorit ja muuntimet toimivat selaimessasi live-esikatselulla.
Tarvitsenko tilin?
Ei. Avaa työkalu, säädä säätimiä ja kopioi CSS.
Aiheeseen liittyvät työkalut
Box Shadow Generator
Design layered box-shadows with offset, blur, spread, and color — live preview included.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolHEX ↔ RGB ↔ HSL Converter
Convert colors between HEX, RGB, and HSL instantly with a live swatch.
Open tool