Gradient-generator

Bygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.

Gradienttype
Fargepunkter
CSS
Juster fargepunktene og retningen for å forme gradienten din.

Hver gradient rendres direkte i nettleseren din. Ingenting du angir her lastes opp til BroBroGo.

Ofte stilte spørsmål

Hva er forskjellen på lineære, radiale og koniske gradienter?

En lineær gradient blander farger langs en rett linje du styrer med en vinkel. En radial gradient sprer dem utover fra sentrum i en sirkel eller ellipse. En konisk (conic) gradient sveiper dem rundt sentrum som et fargehjul.

Hva er fargepunkter?

Hvert fargepunkt (color stop) er en farge låst til en posisjon langs gradienten — 0% ved starten, 100% ved slutten. Flytt et punkt for å endre hvor fargen topper seg, eller legg til flere punkter for en rikere blanding. Du kan bruke opptil åtte.

Hvordan styrer jeg retningen?

For en lineær eller konisk gradient bestemmer vinkelbryteren retningen — 0° peker opp, 90° peker til høyre. En radial gradient har ingen vinkel; velg i stedet en sirkel- eller ellipseform for å endre hvordan den sprer seg.

CSS Cubic Bezier-generatorDra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.Border Radius-generatorRund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.Flexbox-generatorSett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.CSS Grid-generatorDefiner kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.CSS clamp()-kalkulatorAngi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.FargekonvertererKonverter farger mellom HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt og resten oppdateres fortløpende.CSS-formaterer og -minifisererRydd opp i uoversiktlig CSS for å gjøre den lesbar, eller minifiser den for raskere innlasting – med en sikker modus som aldri endrer rekkefølgen på reglene dine.KontrastsjekkerSkriv inn tekst- og bakgrunnsfarge for å se WCAG-kontrastforholdet og hvilke AA- og AAA-nivåer som blir bestått.