In dit artikel
Wat zijn CSS-gradiënten?
Met CSS-gradiënten kunt u vloeiende overgangen tussen twee of meer kleuren maken zonder afbeeldingen te gebruiken. Ze worden native door de browser gerenderd, waardoor ze resolutieonafhankelijk en snel te laden zijn. Gradiënten zijn een van de meest veelzijdige tools in modern webdesign.
Er zijn drie soorten CSS-gradiënten: lineair (overgang langs een rechte lijn), radiaal (straalt uit vanaf een middelpunt) en conisch (draait rond een middelpunt). Elk type ondersteunt meerdere kleurstops, waardoor u complexe, gelaagde effecten kunt maken met slechts één CSS-eigenschap.
Hoe onze generator werkt
De CSS Gradient Generator van CheckTown biedt een intuïtieve visuele interface voor het maken van alle drie de gradiënttypen. Elke wijziging werkt het voorbeeld en de CSS-uitvoer in realtime bij.
- Kies uw gradiënttype — lineair, radiaal of conisch — en pas de hoek of positie aan
- Voeg kleurstops toe, verwijder of herorden ze met een klik. Gebruik de kleurenkiezer of typ hex-codes direct in
- Kopieer de gegenereerde CSS met één klik en plak deze direct in uw stylesheet
Probeer gratis — geen aanmelding vereist
Maak een gradiënt →Wanneer CSS-gradiënten gebruiken
Gradiënten zijn een lichtgewicht alternatief voor achtergrondafbeeldingen en kunnen de laadtijden van pagina's aanzienlijk verbeteren terwijl ze visuele diepte aan uw ontwerpen toevoegen.
- Hero-secties en banners — vervang zware achtergrondafbeeldingen door CSS-gradiënten voor snellere laadtijden
- Knop- en kaartaccenten — subtiele gradiëntachtergronden voegen diepte toe zonder extra bestanden
- Overlays en maskers — leg gradiënten over afbeeldingen voor tekstleesbaarheid of artistieke effecten
Veelgestelde vragen
Werken CSS-gradiënten in alle browsers?
Ja. Lineaire en radiale gradiënten worden ondersteund in alle moderne browsers, waaronder Chrome, Firefox, Safari en Edge. Conische gradiënten worden ook breed ondersteund, met een dekking van meer dan 95% wereldwijd.
Kan ik een CSS-gradiënt animeren?
Niet direct — CSS kan geen overgang maken tussen gradiëntwaarden. U kunt echter de background-position of background-size eigenschappen animeren om de illusie van een bewegende gradiënt te creëren, of CSS custom properties met @keyframes gebruiken voor geavanceerdere effecten.
Hoeveel kleurstops kan een gradiënt hebben?
Er is geen harde limiet op het aantal kleurstops in een CSS-gradiënt. In de praktijk zijn 2 tot 5 stops het meest gebruikelijk. Meer stops creëren vloeiendere, complexere overgangen maar kunnen de renderingprestaties op zeer oude apparaten beïnvloeden.