CSS-gradientgenerator

Deze CSS-gradientgenerator bouwt lineaire en radiale kleurverlopen op basis van kleurstops die jij bepaalt, met een live voorbeeld en een background-declaratie die je zo kunt plakken. Sleep de stops langs de balk, stel de hoek of vorm in, en de CSS wordt direct bijgewerkt.

Alles draait in je browser met de kleuren en instellingen die je kiest. Er wordt niets geüpload, en je kunt het resultaat kopiëren en offline gebruiken.

Een lineaire gradient mengt kleuren langs een rechte lijn, en de hoek bepaalt de richting: 0 graden wijst omhoog, 90 graden naar rechts, 180 graden omlaag. Een radiale gradient mengt vanuit het midden naar buiten, als cirkel of als ellips.

Beide zijn standaard CSS-waarden, geschreven als linear-gradient() en radial-gradient(), en beide gebruiken dezelfde lijst kleurstops. Wissel je van type, dan blijven je kleuren behouden en verandert alleen hoe ze zich verspreiden.

Elke kleurstop is een kleur op een positie van 0% tot 100%. De gradient mengt vloeiend tussen naburige stops, dus de positie van een stop bepaalt waar zijn kleur het sterkst is en hoe snel die overloopt in de volgende.

Voeg zoveel stops toe als je nodig hebt voor meerkleurige verlopen, versleep ze om de overgang bij te stellen, of klik op de balk om precies daar een nieuwe stop te plaatsen. Twee stops is het minimum voor een gradient.

Kopieer de gegenereerde code en plak die als background van elk element, bijvoorbeeld een sectie, kaart of knop. Moderne browsers ondersteunen linear-gradient en radial-gradient zonder vendor-prefix, dus de waarde werkt meteen.

Omdat een gradient gewoon een waarde is, kun je hem overal gebruiken waar een achtergrondafbeelding wordt verwacht, over een effen kleur leggen als fallback, of dezelfde stops hergebruiken in een lineaire en een radiale versie voor een consistente look.