Ga naar hoofdinhoud
LibraTool logoLibraTool

Gratis CSS-verloopgenerator

Maak lineaire, radiale en conische CSS-verlopen met een livevoorvertoning. Kopieer de CSS met één klik.

Werkt offline na het laden
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Voorkomt grijze tussenpunten tussen sterk verschillende kleuren. Voegt een gewone sRGB-regel toe als terugval voor oudere browsers.

0%
100%

Voorinstellingen

Veelvoorkomend gebruik

  • Maak Gradiënten voor Hero-SectiesOntwerp gradiëntachtergronden voor volledige pagina's voor hero-secties en landingspagina's van websites.
  • Maak Verloopknoppen en CTA'sOntwerp opvallende verloopknoppen voor oproepen tot actie die opvallen.
  • Maak Verloopachtergronden voor KaartenOntwerp verloopvullingen voor kaarten, modalen, zijbalken en achtergronden van UI-componenten.
  • Maak Gradiënten voor Sociale MediaafbeeldingenOntwerp levendige verloopachtergronden voor Instagram-berichten, YouTube-miniaturen en Twitter-kaarten.
  • Maak Kleurschalen voor GrafiekenGenereer verloopkleurschalen voor heatmaps, voortgangsbalken en gegevensvisualisaties.

Hoe het werkt

De verloopgenerator bouwt CSS-verloopstrings direct in de browser — geen bibliotheek, geen server, geen upload. Een zelfgeschreven functie stelt in realtime de juiste syntaxis voor linear-gradient, radial-gradient of conic-gradient samen uit je kleurstops en hoek, en maakt het resultaat op voor het uitvoerdoel dat je kiest.

  1. 1
    Stops en richting instellen
    Je stelt 2 tot 6 kleurstops in met de native kleurkiezer van de browser en plaatst elke stop met een schuifregelaar op de as van 0–100%. Voor lineaire en conische verlopen kies je ook een hoek (0–360°); voor radiale verlopen kies je de vorm (ellips of cirkel) en het groottesleutelwoord dat bepaalt hoe ver het verloop reikt.
  2. 2
    buildCss stelt de verloopstring samen
    Bij elke wijziging voegt een lokale buildCss-functie je parameters samen tot de juiste CSS-functieaanroep — bijv. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Er komt geen bibliotheek aan te pas; de tekenreeks wordt met gewone JavaScript-templatelogica gebouwd en direct uit de array met stops samengevoegd.
  3. 3
    Live voorbeeld via inline stijl
    De samengestelde verloopstring wordt direct als inline achtergrondstijl op een div-element toegepast, zodat de eigen CSS-engine van de browser het voorbeeld tekent. Er is geen canvas of afbeelding bij betrokken — wat je ziet is letterlijk de CSS-eigenschap die wordt toegepast.
  4. 4
    Uitvoer klaar om te kopiëren in vier formaten
    Een formaatkeuze zet dezelfde verloopstring om naar gewone CSS (background: ...), een CSS-blok met een effen terugvalkleur, een Tailwind-klasse met willekeurige waarde of een SCSS-variabeledeclaratie. Klikken op Kopiëren schrijft de gekozen uitvoer via navigator.clipboard.writeText naar het klembord. Het huidige verloop wordt ook in de URL-hash gecodeerd, zodat je het als bladwijzer kunt opslaan of delen.

Gerelateerde tools

🟦

CSS-rastergenerator

Ontwerp visueel een CSS-raster — tracks, eenheden en tussenruimtes — en kopieer de gegenereerde CSS en HTML.

Probeer het
↔️

CSS-flexboxgenerator

Experimenteer met flex-richting, wrap, justify en align op live-items — en kopieer de CSS.

Probeer het
🧮

Matrixcalculator

Matrices optellen, aftrekken, vermenigvuldigen, transponeren, inverteren en reduceren, plus determinant, rang, eigenwaarden en het oplossen van Ax = b — tot 8×8, met kopiëren in één tik. Gratis en privé.

Probeer het

Veelgestelde vragen