Gradient maker.

Bouw CSS linear, radial of conic gradients met live preview. Pas kleuren en richting aan en kopieer de CSS.

0%
100%

          
        

Kies een gradienttype, voeg kleurstops toe, stel posities in en zie het resultaat live. De gegenereerde CSS background-property is klaar om te plakken. Voeg zoveel stops toe als je wilt.

Zo gebruik je het

Selecteer een type, stel de hoek in (voor linear/conic), klik kleurvakjes om kleuren te wijzigen en sleep sliders voor stopposities. Klik + Kleur toevoegen voor meer stops. Kopieer de CSS rechts.

Voorbeelden

Sunset linear (135°) linear-gradient(135deg, #ee6c4d 0%, #3859d5 100%)
Radial glow radial-gradient(circle, #ffffff 0%, #3859d5 100%)
Conic colour wheel conic-gradient(from 0deg, #ee6c4d, #3859d5, #1f8a5b, #ee6c4d)

FAQ

What is a conic gradient?

A conic gradient rotates colours around a central point. It's useful for pie charts, colour wheels, dial effects, and any design where colour transitions in a sweep rather than a line.

How many colour stops can I add?

As many as you like — click + Add colour to insert additional stops. The CSS is valid regardless of how many stops you use.

Gerelateerde tools

Privacy en gegevensverwerking

Deze tool draait volledig in je browser. Niets wat je typt of plakt wordt naar een server gestuurd — alle verwerking gebeurt lokaal op je apparaat.