CSS-gradientgenerator
Maak CSS-gradiënten
Hoe CSS-gradientgenerator te gebruiken
Maak CSS-gradiënten Gratis online tool, geen registratie, geen opdringerige advertenties. Gebruik het nu.
Waarvoor dienen CSS-kleurovergangen?
CSS-kleurovergangen maken vloeiende kleurovergangen direct in de browser zonder afbeeldingsbestanden te laden. Ze zijn een pijler van modern webontwerp — ze maken rijke visuele effecten mogelijk zonder extra HTTP-verzoeken, waardoor prestaties en de Core Web Vitals-metrics van Google verbeteren.
- Achtergronden van hero-secties: Volledige breedte achtergronden met kleurovergangen op landingspagina's creëren visuele impact zonder zware afbeeldingen. Een lineaire overgang van de primaire naar de secundaire merkkleur vestigt direct de visuele identiteit.
- Knopstijling: Achtergronden met kleurovergangen op call-to-action knoppen voegen diepte en visueel gewicht toe.
background: linear-gradient(135deg, #7B35F5, #C040A0)is een voorbeeld van een levendige diagonale overgang. - Tekst met kleurovergang: Pas kleurovergangen toe op tekst met
background-clip: texten-webkit-text-fill-color: transparent— maakt visueel impactvolle titels die veel voorkomen op moderne websites. - Overlay-effecten: Een semi-transparante kleurovergangsoverlay op een afbeelding (van transparant naar zwart) verbetert de leesbaarheid van bovenliggende tekst zonder de achtergrondafbeelding volledig te blokkeren.
- Voortgangsbalken en datavisualisatie: Kleurovergangsopvullingen in voortgangsbalken en grafiekelementen maken gegevens visueel aantrekkelijker en moderner.
Typen kleurovergangen: linear-gradient(richting, kleur1, kleur2) voor directionele overgangen. radial-gradient(vorm, kleur1, kleur2) voor cirkelvormige/elliptische overgangen. conic-gradient(kleur1, kleur2) voor rotatieovergangen in taartdiagramstijl (CSS4 — ondersteund door alle moderne browsers).
Frequently Asked Questions
Wat is het verschil tussen lineaire, radiale en conische kleurovergangen?
Lineaire kleurovergangen gaan over langs een rechte lijn (van boven naar beneden, van links naar rechts of elke hoek). Radiale kleurovergangen stralen uit vanuit een centraal punt naar buiten in een cirkel of ellips. Conische kleurovergangen gaan over rondom een centraal punt — zoals het gezicht van een kleurenwiel of een taartdiagram. Elk creëert een fundamenteel ander visueel effect.
Hoe maak ik een herhalend kleurverloop?
Gebruik repeating-linear-gradient() of repeating-radial-gradient(). Specificeer het verloop met een gedefinieerde lengte: repeating-linear-gradient(45deg, rood 0px, rood 10px, blauw 10px, blauw 20px) maakt diagonale strepen. Zonder een gedefinieerde patroongrootte gedragen herhalende kleurovergangen zich als gewone kleurovergangen.
Kunnen kleurovergangen worden geanimeerd met CSS?
Kleurovergangen zelf kunnen niet rechtstreeks worden getransitioneerd met CSS — background-image is niet direct animeerbaar. Alternatieven: gebruik background-position met een grotere background-size om een bewegingsanimatie te maken, of gebruik aangepaste CSS-eigenschappen (variabelen) voor de kleuren en transitioneer deze variabelen.
Wat betekent de hoek van het verloop?
De hoek in linear-gradient wordt gemeten met de klok mee vanaf boven. 0deg gaat omhoog (van beneden naar boven). 90deg gaat naar rechts (van links naar rechts). 180deg gaat naar beneden (van boven naar beneden). 45deg gaat diagonaal naar rechts beneden. Je kunt ook richtingsleutelwoorden gebruiken: to top, to bottom, to right, to bottom right, enz.
Hoe maak ik een kleurverloop met meerdere kleurpunten?
Voeg meer kommagescheiden kleurwaarden toe: linear-gradient(135deg, #ff0000 0%, #ff8800 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Het percentage bepaalt waar elke kleur verschijnt. Zonder percentages worden punten gelijkmatig verdeeld. Kleurpunten kunnen overlappen om harde overgangen te maken in plaats van zachte.
CSS-kleurovergangen vs SVG-kleurovergangen vs afbeeldingsverlopen
CSS-kleurovergangen vereisen geen externe bestanden, schalen perfect en zijn gemakkelijk te animeren — de eerste keuze voor achtergronden en eenvoudige UI-effecten. SVG-kleurovergangen kunnen worden toegepast op SVG-vormen en -paden — flexibeler voor complexe vectorgrafiek. Afbeeldingsverlopen (PNG, JPG) zijn nodig voor zeer complexe effecten die CSS niet kan reproduceren. Voor webachtergronden en UI-elementen moeten CSS-kleurovergangen altijd de voorkeur krijgen boven afbeeldingen om prestatieredenen.