CSS-kleurverloopgenerator

Bouw CSS-kleurverlopen visueel

CSS-kleurverlopen zijn krachtig omdat ze perfect schalen, direct laden en geen afbeeldingsbestanden nodig hebben. Met één declaratie maak je hero-achtergronden, knopaccenten, kaarten, overlays, grafiekvullingen en subtiele decoratieve vlakken. Deze kleurverloopgenerator geeft je een live voorbeeld terwijl je kleuren, stoppposities en richting aanpast, en levert daarna een kant-en-klare background:-regel voor je stylesheet.

De tool ondersteunt zowel lineaire als radiale verlopen. Lineaire verlopen lopen over een element in een richting die door een hoek wordt bepaald, handig voor banners, knoppen en diagonale lichteffecten. Radiale verlopen stralen uit vanuit het midden en werken goed voor spotlights, gloed, zachte achtergronden en focusgebieden. Omdat het voorbeeld gewone browser-CSS gebruikt, is wat je ziet hetzelfde soort verloop als je bezoekers te zien krijgen.

Werken met kleurstops

Een kleurstop geeft de browser aan welke kleur op een bepaald percentage van het verloop moet verschijnen. Twee stops maken een eenvoudige overgang van de ene naar de andere kleur, terwijl drie of meer stops een highlight kunnen toevoegen, via een merkkleur kunnen lopen of een kleur over een groter deel van het element kunnen vasthouden. Stops dichter bij elkaar zetten geeft een scherpere overgang; verder uit elkaar geeft een zachtere overgang. Gebruik extra stops spaarzaam, want een verloop met te veel niet bij elkaar passende tinten kan afleiden.

Kleurverlopen gebruiken in echte interfaces

Kleurverlopen zijn het makkelijkst te onderhouden als ze de inhoud ondersteunen in plaats van ermee te concurreren. Houd het contrast hoog in tekstrijke gebieden en overweeg een halfdoorzichtige overlay tussen het verloop en de tekst. Test bij knoppen en decoratieve kaarten de hover- en focusstatussen, zodat het verloop contouren niet verbergt en de leesbaarheid niet vermindert. Kopieer de gegenereerde CSS naar je project en pas daarna spacing, afronding en voorgrondkleuren in context aan. Het beste verloop is het verloop dat de hiërarchie versterkt en de interface duidelijk houdt.