Gratis CSS-verloopgenerator online

Een CSS-verloop is de lichtste en meest flexibele manier geworden om een achtergrond, knop of kaart op te leuken. U hoeft geen PNG meer te exporteren uit een afbeeldingseditor: de browser berekent de overgang tussen uw kleuren, vectorgebaseerd, in enkele tientallen bytes. De CSS-verloopgenerator van Volade genereert de exacte code — hoek, stops, oorsprongpositie — terwijl u op het scherm samenstelt.

linear-gradient: het directionele verloop

De functie linear-gradient() neemt een hoek gevolgd door de stops aan: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). De hoek 0deg wijst omhoog, 90deg naar rechts, 180deg naar beneden. Zonder hoek loopt de browser van boven naar beneden. Dit is de meest gebruikte syntaxis voor headers, call-to-action-knoppen en sectiebanners.

radial-gradient: de gloed en de ellips

De functie radial-gradient() begint bij een punt (standaard het midden) en verspreidt zich in een cirkel of ellips. De oorsprongpositie wordt genoteerd als at X% Y%: radial-gradient(circle at 50% 50%, …). Perfect voor een gloedeffect achter een titel, een hero-achtergrond die op het midden mikt of een synthetische zachte schaduw. De tool heeft twee schuifregelaars X en Y om de oorsprong pixelprecies te plaatsen.

conic-gradient: de rotatie rond een punt

De functie conic-gradient() draait rond een punt, zoals de wijzers van een klok. Het wordt geschreven als conic-gradient(from 90deg at 50% 50%, …) en maakt het mogelijk om ringen, cirkelvormige meters, gekleurde randen of prisme-effecten te maken. Elke stop beslaat een hoeksector: met meerdere kleuren tekent u een CSS-taartdiagram zonder één afbeelding.

De kleurstops (color stops)

Elke stop koppelt een kleur en een procentuele positie: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Identieke posities voor twee kleuren creëren een scherpe overgang (harde rand); ruimere posities zorgen voor een geleidelijke overgang. Meer dan twee stops maken multikleurenpaletten, banden of materiaalsimulaties mogelijk (metaal, parelmoer, noorderlicht).

Een verloop overlappen en een terugval voorzien

In de shortcut background, telt de volgorde: het voorplan eerst. Een donkere sluier op een foto wordt geschreven als background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Plaats altijd een egale kleur als terugval (background-color) voor zeer oude browsers of tijdens het laden van de afbeelding.

Beste prestatiepraktijken

Een CSS-verloop wordt bij elke herberekening opnieuw berekend: houd het aantal stops redelijk (2 tot 5 volstaan in 90% van de gevallen) en vermijd meerdere overlappingen op zeer grote oppervlakken op mobiel. Geef de voorkeur aan hexadecimale of HSL-waarden stables en bevries de hoek zodra het design is goedgekeurd om microverschillen tussen browsers te vermijden.

Verlopen in de Volade-huisstijl

Bouw een consistent palet voordat u verlopen afleidt, gebruikt u de paletgenerator en de kleurkiezer : vind de merkkleuren en plak ze hier als stops. Het resultaat wordt direct gekopieerd naar uw CSS, design system of thema — op desktop en mobiel, zonder account en zonder gegevens te verzenden.