Gradient-generator

Byg en lineær, radial eller konisk gradient, tilføj farvestop og indstil retningen, og kopier derefter CSS-koden med ét klik.

Gradienttype
Farvestop
CSS
Juster farvestoppene og retningen for at forme din gradient.

Hver gradient renderes direkte i din browser. Intet af det, du indstiller her, uploades til BroBroGo.

FAQ

Hvad er forskellen på lineære, radiale og koniske gradienter?

En lineær gradient blander farver langs en ret linje, som du styrer med en vinkel. En radial gradient spreder dem udad fra midten i en cirkel eller ellipse. En konisk (conic) gradient fejer dem rundt om midten som et farvehjul.

Hvad er farvestop?

Hvert farvestop er en farve, der er fastgjort til en position langs gradienten — 0% i starten, 100% i slutningen. Flyt et stop for at ændre, hvor farven topper, eller tilføj flere stop for at få en mere nuanceret overgang. Du kan bruge op til otte.

Hvordan styrer jeg retningen?

For en lineær eller konisk gradient bestemmer vinkelskyderen retningen — 0° peger opad, 90° peger mod højre. En radial gradient har ikke en vinkel; vælg i stedet en cirkel- eller ellipseform for at ændre, hvordan den spreder sig.

CSS Cubic Bezier-generatorTræk i de to håndtag for at forme en easing-kurve, se en prik bevæge sig langs den i forhold til en jævn bevægelse, og kopier cubic-bezier()-værdien.Box shadow-generatorTræk i skyderne for at forme en box-shadow, stabel lag for at skabe dybde, og kopier den færdige CSS med det samme.Border radius-generatorAfrund hvert hjørne med skydere, form organiske klatter med elliptisk tilstand, og kopier din CSS med det samme.Flexbox-generatorOpsæt en flex-container og dens elementer med visuelle kontroller, se layoutet reagere live, og kopier CSS-koden med ét klik.CSS Grid-generatorIndstil dine søjler og rækker, træk hen over cellerne for at placere elementer, og kopier grid-CSS med tilhørende HTML med ét klik.CSS clamp() BeregnerIndtast en størrelse til små og store skærme, og få en flydende clamp()-værdi, der skalerer jævnt derimellem — til skriftstørrelser, padding, marginer eller gaps.FarvekonverterKonverter farver mellem HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt, og resten opdateres løbende.CSS Formaterings- og minificeringsværktøjGenindryk rodet CSS for at gøre det læsbart, eller minificer det til udgivelse – med en sikker tilstand, der aldrig ændrer rækkefølgen af dine regler.KontrasttjekkerIndtast en tekst- og baggrundsfarve for at se WCAG-kontrastforholdet og hvilke AA- og AAA-niveauer der bestås.