CSS-gradiëntgenerator
Bouw lineaire, radiale en conische verlopen met live preview en kopieerklare CSS. Pas stops, hoeken en vormen aan en plak deze vervolgens in uw stylesheet.
CSS Gradient Generator
LiveCSS output
background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);
Key capabilities
- Bouw lineaire, radiale en conische verlopen met live preview en kopieerklare CSS.
- Draait in uw browser
- Gratis te gebruiken
Hoe te gebruiken
- Kies het verlooptype en de hoek of positie.
- Kleurstops toevoegen of bewerken.
- Kopieer de gegenereerde CSS.
How this tool works
- Kies het verlooptype en de hoek of positie.
- Kleurstops toevoegen of bewerken.
- Kopieer de gegenereerde CSS.
Recommended settings
- Gebruik eerst de standaardopties en pas deze indien nodig aan
Supported formats
Text / on-page input
File size and limits
- Zeer complexe voorvertoningen met meerdere lagen kunnen op oudere telefoons langzamer aanvoelen.
Privacy
Kleur- en CSS-generatoren draaien volledig in uw browser. Previews en conversies uploaden nooit uw stijlen.
Common use cases
- Gebruik CSS Gradient Generator wanneer u maar wilt: Bouw lineaire, radiale en conische verlopen met live preview en kopieerklare CSS.
Troubleshooting
Het voorbeeld ziet er anders uit na het plakken
Controleer of er concurrerende CSS op uw pagina aanwezig is (resets, overgenomen kleuren). Kopieer de gegenereerde regel eerst naar een geïsoleerd stylesheet.
FAQ
Uploadt dit mijn CSS?
Nee. Generatoren en converters worden in uw browser uitgevoerd met live preview.
Heb ik een account nodig?
Nee. Open de tool, pas de besturingselementen aan en kopieer de CSS.
Gerelateerde tools
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