Hoe CSS-verlopen te maken

CSS-verlopen maken het mogelijk om vloeiende kleurovergangen te creëren zonder afbeeldingsbestand. Ze zijn lichter dan afbeeldingen, passen zich perfect aan elke schermgrootte aan en zijn eenvoudig te personaliseren.

Soorten CSS-verlopen

Lineair verloop — de kleuren gaan over in een rechte lijn (boven naar beneden, links-rechts of elke hoek).

background: linear-gradient(135deg, #667eea, #764ba2);

Radiaal verloop — de kleuren stralen vanuit een centraal punt volgens een cirkelvormig of elliptisch patroon.

background: radial-gradient(circle, #667eea, #764ba2);

Conisch verloop — de kleuren draaien rond een centraal punt, zoals een kleurenwiel.

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

Hoe verlopen visueel te maken

1. Selecteer het verloop-type — kies lineair of radiaal en stel de hoek of positie in.
2. Voeg kleurpunten toe — klik om kleuren op verschillende posities van het verloop toe te voegen. Pas elke kleur en positie aan.
3. Kopieer de CSS — kopieer de gegenereerde code en plak deze in uw stijlbestand.

Een visuele generator gebruiken is sneller dan de syntaxis met de hand schrijven, vooral met meerdere kleurpunten.

Veelvoorkomende verloop-patronen

Hero-sectie achtergrond — een subtiel verloop met twee kleuren voegt diepte toe zonder af te leiden van de tekst.

background: linear-gradient(135deg, #0f172a, #1e3a5f);

Knop-highlight — een licht verloop geeft knoppen een driedimensionaal effect.

background: linear-gradient(180deg, #3b82f6, #2563eb);

Sluier op afbeelding — een verloopsluier verbetert de leesbaarheid van tekst op foto's.

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

Accent-rand — gebruik een verloop als rand om visuele interesse te creëren.

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

Tips

• Blijf subtiel — de beste verlopen worden nauwelijks opgemerkt. Een lichte glijden tussen twee vergelijkbare kleuren voegt diepte toe. Dramatische regenboog-verlopen ogen zelden professioneel.
• Gebruik verlopen in plaats van afbeeldingen — een CSS-verloop laadt direct zonder netwerkaanvraag. Vervang decoratieve achtergrondafbeeldingen door verlopen waar mogelijk.
• Test in donkere modus — verlopen die er goed uitzien op lichte achtergrond kunnen verbleken of botsen in donkere modus. Definieer indien nodig verschillende verlopen voor elk thema.
• Let op tekstcontrast — als u tekst op een verloop plaatst, verifieer dat deze leesbaar blijft over het hele bereik van het verloop, niet alleen op het lichtste of donkerste deel.