CSS-gradiëntgenerator

linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) met de hand schrijven en de pagina herladen om het resultaat te zien is een trage lus. Deze generator maakt er korte metten mee: kies lineair, radiaal of conisch, versleep de hoekschuifregelaar, stel elke kleurstop in met een eigen kleurkiezer en een procentuele positie — en het brede voorbeeldvenster werkt zichzelf bij bij elke invoer, terwijl de afgewerkte achtergrondregel altijd klaarstaat om te kopiëren.

De drie gradiënttypen dekken verschillende taken. Lineaire gradiënten vervagen langs een richting en dragen de meeste hero-secties en knoppen; radiale gradiënten stralen vanuit het midden voor gloed en vignetten; conische gradiënten vegen rond het midden en drijven taartdiagrammen en kleurencirkels aan. Je kunt op elk moment van type wisselen — je stops blijven behouden, dus de drie vergelijken kost seconden.

Tot zes kleurstops geven je ruimte voor ontwerpen met meerdere banden, en de voorbeeldpagina's leveren beproefde combinaties — een warme zonsondergang, een kalme oceaan en een zacht pastelpaar — als startpunten die je kunt aanpassen in plaats van een leeg canvas. Let op de taakverdeling: de kleurenpaletgenerator op deze site kiest harmonieuze egale kleuren en de kleurformaatomzetter vertaalt een waarde tussen HEX, RGB en HSL, terwijl deze tool een andere taak heeft — hij zet gekozen kleuren om in kant-en-klare CSS-gradiëntcode.

Alles draait lokaal in je browser: geen upload, geen account, geen server-communicatie, en de generator blijft offline werken zodra hij geladen is.