Gradient Generator

Ontwerp een lineair, radiaal of conisch verloop, voeg kleurstops toe, bepaal de richting en kopieer direct de CSS.

Type verloop
Kleurstops
CSS
Pas de kleurstops en de richting aan om je verloop vorm te geven.

Elk verloop wordt direct in je browser gerenderd. Niets van wat je hier instelt, wordt geüpload naar BroBroGo.

Veelgestelde vragen

Wat is het verschil tussen lineaire, radiale en conische verlopen?

Een lineair verloop (linear gradient) mengt kleuren langs een rechte lijn die je met een hoek instelt. Een radiaal verloop (radial gradient) verspreidt kleuren vanuit het midden naar buiten in een cirkel of ellips. Een conisch verloop (conic gradient) draait de kleuren om het middelpunt heen, net als een kleurencirkel.

Wat zijn kleurstops?

Elke kleurstop is een kleur die is vastgezet op een specifieke positie langs het verloop — 0% aan het begin, 100% aan het einde. Verschuif een stop om te bepalen waar die kleur het sterkst is, of voeg extra stops toe voor een rijkere overgang. Je kunt er maximaal acht gebruiken.

Hoe bepaal ik de richting van het verloop?

Bij een lineair of conisch verloop bepaalt de hoek-schuifregelaar de richting — 0° wijst omhoog, 90° wijst naar rechts. Een radiaal verloop heeft geen hoek; kies in plaats daarvan een cirkel- of ellips-vorm om te bepalen hoe het verloop zich verspreidt.

CSS Cubic Bezier GeneratorSleep de twee hendels om een easingcurve te ontwerpen, zie hoe een stip de curve volgt ten opzichte van een constante snelheid en kopieer de cubic-bezier()-waarde.Box Shadow GeneratorSleep schuifregelaars om een box-shadow te maken, stapel lagen voor extra diepte en kopieer direct de voltooide CSS.Border Radius GeneratorRond elke hoek af met schuifregelaars, maak organische blobs met de elliptische modus en kopieer direct de CSS.Flexbox GeneratorStel een flex-container en de bijbehorende items in met visuele knoppen, zie de lay-out direct reageren en kopieer de CSS met één klik.CSS Grid GeneratorStel je kolommen en rijen in, sleep over de cellen om items te plaatsen en kopieer met één klik de grid-CSS met bijbehorende HTML.CSS clamp() CalculatorVoer een grootte in voor kleine en grote schermen en krijg een vloeiende clamp()-waarde die er prachtig tussenin schaalt — voor lettergroottes, padding, marges of gaps.KleurconverterConverteer kleuren tussen HEX, RGB, HSL, HSV, CMYK en LAB — bewerk een veld en de rest verandert direct mee.CSS Beautifier & MinifierLijn rommelige CSS opnieuw uit om het te lezen, of minificeer het voor productie — met een veilige modus die de volgorde van je regels nooit verandert.Contrast CheckerVoer een tekst- en achtergrondkleur in om de WCAG-contrastverhouding te zien en te controleren welke AA- en AAA-niveaus worden behaald.