CSS-gradiëntgenerator

Met de hand lineair verloop (135deg, #2193b0 0%, #6dd5ed 100%) schrijven en de pagina opnieuw laden om te zien dat het een langzame lus is. Deze generator sluit het: kies lineair, radiaal of kegelvormig, sleep de hoekschuifregelaar, stel elke kleurstop in met een eigen kleurkiezer en een procentpositie - en het voorbeeld over de volledige breedte wordt bij elke invoer opnieuw getekend, waarbij de voltooide achtergrondlijn altijd klaar is om te kopiëren.

De drie gradiënttypen hebben betrekking op verschillende banen. Lineaire gradiënten vervagen in een richting en dragen de meeste heldensecties en knoppen; radiale gradiënten stralen vanuit het midden voor gloed en vignetten; conische gradiënten lopen rond het midden en zorgen voor cirkeldiagrammen en kleurenwielen. Je kunt op elk moment van type wisselen; je stops worden overgedragen, dus het vergelijken van de drie duurt seconden.

Tot zes kleurstops bieden u ruimte voor ontwerpen met meerdere banden, en de vooraf ingestelde pagina's bevatten beproefde combinaties – een warme zonsondergang, een kalme oceaan en een zacht pastelpaar – als uitgangspunten die u kunt aanpassen in plaats van blanco doeken. Let op de taakverdeling: de kleurenpaletgenerator op deze site kiest harmonieuze vlakke kleuren en de kleurformaatconverter vertaalt een waarde tussen HEX, RGB en HSL, terwijl deze tool een ander werk doet: hij zet gekozen kleuren om in kant-en-klare CSS-gradiëntcode.

Alles draait lokaal in uw browser: geen upload, geen account, geen serverrondreizen en de generator blijft offline werken zodra deze is geladen.