CSS conische-gradiëntgenerator
Bouw CSS-gradiënten visueel op: lineair, radiaal of conisch type, hoekschuifregelaar en tot zes kleurstops met een live breed voorbeeldvenster en kopieerbare code.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de gradiëntgenerator met het conische type al geselecteerd: in plaats van te vervagen langs een lijn of vanuit het midden naar buiten, vegen de kleuren als een klokwijzer rond het midden, beginnend bij de hoek die je op de schuifregelaar instelt.
conic-gradient() is de nieuwste van de drie CSS-gradiëntfuncties en degene achter taartdiagrammen, kleurencirkels en opvallende effecten met draaiende randen. Stopposities in procent zijn posities rond de cirkel — twee stops op 0% en 100% blenden soepel helemaal rond, terwijl stops die dicht bij elkaar staan scherpe taartpunten maken.
Pas de starthoek en stops aan tot het voorbeeld klopt en kopieer dan de achtergrondregel. Alle moderne browsers ondersteunen conische gradiënten, dus de code is veilig om live te zetten.