Een CSS-kleurverloop genereren
Maak met deze pagina één niet-herhalende achtergrondafbeelding uit expliciete kleurstops. Alle waarden blijven zichtbaar zodat de CSS zonder sleepeditor reproduceerbaar is.
- Kies Lineair of Radiaal.
- Kies twee, drie of vier stops.
- Voer voor elke stop HEX-kleur, dekking en procentpositie in.
- Stel bij een lineair verloop de hoek in; bij een radiaal verloop het X- en Y-middelpunt.
- Genereer, vergelijk voorbeeld en CSS-waarde en kopieer.
Lineaire en radiale syntaxis
Een lineair verloop volgt een rechte verlooplijn. In CSS wijst 0deg omhoog en draaien positieve hoeken met de klok mee. De generator schrijft linear-gradient(angle, stops). Een radiaal verloop verspreidt zich vanuit een punt en schrijft radial-gradient(circle at X% Y%, stops). Beide functies zijn geldige CSS-afbeeldingswaarden voor eigenschappen zoals background-image.
Kleurstops, dekking en gelijke posities
Elke stop combineert een kleur met een positie langs de verlooplijn. Posities zijn hier beperkt tot 0–100% voor voorspelbare bediening, hoewel CSS ook stops buiten dat interval toestaat. Stops moeten oplopend worden ingevoerd. Twee aangrenzende kleuren mogen dezelfde positie hebben; CSS maakt dan een harde overgang. Dekking wordt alleen als rgba() geschreven als zij lager dan 1 is.
Waarom invoerwijzigingen het voorbeeld wissen
Het zichtbare voorbeeld is de bevestigde weergave van de getoonde uitvoer. Een instelling wijzigen maakt direct het vorige resultaat, de kopieerstatus en het voorbeeld ongeldig. Genereer opnieuw om de huidige instellingen toe te passen. Zo staat er geen oude CSS naast nieuwe invoer en komt de gekopieerde declaratie overeen met de bevestigde browserweergave.
Bereik en browsercontroles
- Twee tot vier geordende stops; gelijke posities worden ondersteund.
- Eén cirkelvormig radiaal verloop met procentueel middelpunt.
- Eén lineaire hoek van 0 tot 360 graden.
- Geen herhalende verlopen, sleepgrepen, voorbeelden, paletadvies, animatie, afbeeldingsexport of browserprefixen.
- Controleer tekstcontrast apart als het verloop achter inhoud staat; het visuele voorbeeld is geen toegankelijkheidsbeoordeling.
Voorbeelden
linear-gradient(90deg, #FF0000 0%, rgba(0, 0, 255, 0.5) 100%) loopt horizontaal met een halftransparant blauw einde.
radial-gradient(circle at 25% 75%, #FFFFFF 0%, #000000 100%) plaatst het middelpunt meer linksonder.
Veelgestelde vragen
Mogen twee stops dezelfde positie hebben?
Ja. Gelijke aangrenzende posities blijven behouden en maken een scherpe kleurrand.
Waarom moeten posities oplopen?
Dit maakt de stopvolgorde expliciet en voorkomt onverwachte correcties na kopiëren.
Maakt dekking het hele element transparant?
Nee. Alleen de kleur van die stop verandert; het uiteindelijke uiterlijk hangt ook af van de achtergrond achter het verloop.
Waarom bevat de uitvoer geen leveranciersprefixen?
De pagina gebruikt de huidige standaardnotatie zonder prefix voor moderne browsers.