Bouw CSS linear, radial of conic gradients met live preview. Pas kleuren en richting aan en kopieer de CSS.
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.
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.
Gradients verdienen hun plek wanneer ze sfeer, diepte of nadruk helpen opbouwen zonder dat je meteen een volledig beeldasset hoeft toe te voegen. De praktische waarde van een generator zit in snelheid: je kunt richting, stopposities en gradienttype snel genoeg vergelijken om ontwerpbeslissingen te nemen terwijl het idee nog vers is.
Deze tool houdt die verkenning visueel en produceert CSS die je kunt hergebruiken zodra de behandeling klopt.
Gradients kunnen diepte en beweging toevoegen zonder het gewicht van een afbeelding, maar grote oppervlakken maken ook slechte stopplaatsing en troebele kleurverlopen meteen zichtbaar.
Knoppen, banners en uitgelichte panelen kunnen baat hebben bij subtiele gradients, maar ze kunnen ook snel gedateerd ogen als de overgang te agressief is.
Goedgekeurde merkkleuren in een gradient gebruiken klinkt simpel totdat de menging in het midden niet meer als het merk voelt.
De meeste gradients worden beter wanneer ze eenvoudig beginnen. Meer stops betekent niet automatisch meer verfijning.
Hoeken en stoppercentages zijn abstract moeilijk te beoordelen. Het is de live preview die er een ontwerpbeslissing van maakt.
Een gradient kan op zichzelf goed ogen en toch slecht werken zodra er tekst, iconen of kaarten bovenop komen.
Hier verdienen gradients vaak hun plek: ze geven een pagina sfeer zonder dat er een zwaar beeldasset nodig is.
Als meerdere componenten dezelfde visuele taal moeten delen, is één exacte CSS-gradient kopiëren netter dan die op meerdere plekken met de hand benaderen.
Deze types kunnen visueel sterk zijn, maar ook makkelijk te veel van het goede. Een generator helpt je dat snel te ontdekken.
Deze tool genereert gradient-CSS. Hij kiest geen toegankelijke voorgrondkleuren, bouwt geen volledig kleursysteem en zegt niet of het effect bij je layout past. Hij geeft je een bruikbare gradientwaarde, niet het volledige ontwerpoordeel.
Gradients zijn makkelijk toe te voegen en verrassend makkelijk te verpesten. De waarde van een generator zit niet alleen in snelheid, maar ook in minder verspilde ontwerpiteraties door vermijdbaar gepruts met syntaxis.
Een conic gradient draait kleuren rond een centraal punt. Dit is handig voor cirkeldiagrammen (pie charts), kleurenwielen, wijzerplaateffecten en elk ontwerp waarbij kleuren in een cirkelbeweging in elkaar overgaan in plaats van in een lijn.
Zoveel je wilt — klik op + Kleur toevoegen om extra stops in te voegen. De CSS is geldig ongeacht het aantal stops dat je gebruikt.
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.