CSS-verloopgenerator
Kies twee kleuren, selecteer een lineair of radiaal verloop en pas de hoek aan om een live voorbeeld te zien. De bijbehorende CSS wordt direct gegenereerd en is klaar om rechtstreeks in je stylesheet te plakken.
background: linear-gradient(90deg, #ff9a00, #60acfc);Hoe het werkt
Kies je twee kleuren met de kleurkiezers, selecteer „lineair” of „radiaal”, en sleep bij lineaire verlopen de hoekschuifregelaar. De voorbeeldweergave en de CSS-code hieronder werken direct bij, terwijl je iets aanpast.
Tip
Een hoek van 90deg loopt van links naar rechts, 180deg van boven naar onder, en 0deg van onder naar boven — experimenteer met de schuifregelaar om te zien hoe de richting verandert.
Wat is het verschil tussen lineair en radiaal?
Een lineair verloop verandert langs een rechte lijn onder de ingestelde hoek. Een radiaal verloop breidt zich cirkelvormig uit vanuit het midden naar buiten, ongeacht de hoek.
Meer tools in deze categorie
Belichtingscalculator
Vind gelijkwaardige camerabelichtingen voor diafragma, sluitertijd en ISO.
Beeldverhouding-calculator
Schaal een afbeelding of video proportioneel en vind de vereenvoudigde verhouding.
Contrastchecker
Controleer of een voorgrond- en achtergrondkleur voldoen aan de WCAG-contrastrichtlijnen.
Kleurenpalet-generator
Zet elke basiskleur om in complementaire, analoge en triadische kleurenpaletten.
Kleurformaat-converter
Zet elke kleur direct om tussen HEX, RGB, HSL en CMYK, met een kopieerknop per formaat.
Typografie-schaalgenerator
Genereer een harmonieuze reeks lettergroottes op basis van een basisgrootte en een schaalverhouding, klaar om te kopiëren als CSS custom properties.