CSS Gradient Generator
Genereer CSS gradients met live preview.
CSS
Wat doet deze tool?
Bouwt CSS-gradients (lineair of radiaal) visueel: kies kleuren, richting en stops, en kopieer de kant-en-klare CSS.
Hoe werkt de berekening?
De tool combineert jouw kleurstops in een linear-gradient() of radial-gradient() functie. Bijvoorbeeld: 'linear-gradient(90deg, #ff0000 0%, #0000ff 100%)'. De preview past de gradient live toe zodat je direct ziet wat er gebeurt.
Een concreet voorbeeld
Twee stops: rood op 0%, blauw op 100%, richting 90deg → 'background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);'. Plak dit in je CSS.
Veelgestelde vragen
Kan ik meer dan twee kleuren gebruiken?+
Ja, zoveel als je wilt. Meer dan 4–5 wordt visueel snel rommelig.
Wat is het verschil tussen linear en radial?+
Linear loopt in een rechte lijn (bijv. van links naar rechts). Radial loopt uit een middelpunt naar buiten in cirkelvorm.
Werken gradients op alle browsers?+
Ja, al sinds ~2013 zonder vendor prefixes. Volstrekt veilig te gebruiken.