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.

Skrevet og gennemgået af BroBroGo-redaktionen.Sidst opdateret:

CSS-gradienter og deres opbygning

En CSS-gradient er en visuel overgang mellem to eller flere farver, som renderes direkte af browseren. Gradienter bruges i webdesign til at skabe baggrunde, der giver dybde og struktur uden at belaste indlæsningstiden med tunge billedfiler.

Når du designer en gradient, bestemmes udseendet af tre primære faktorer: gradienttypen, retningen eller formen samt placeringen af de enkelte farvestop. Dette værktøj lader dig konfigurere disse parametre præcist og genererer den korrekte CSS-kode til dit stylesheet.

Gradienttyper: Lineær, radial og konisk

CSS understøtter forskellige geometriske måder at fordele farver på. Værktøjet lader dig vælge mellem tre gradienttyper under overskriften Gradienttype:

  • Lineær (Lineær): Blander farverne langs en ret linje. Retningen af denne linje bestemmes af en vinkel.
  • Radial (Radial): Spreder farverne udad fra et centralt punkt. Farverne fordeler sig i en rund form, som enten kan være en cirkel eller en ellipse.
  • Konisk (Conic) (Konisk (Conic)): Fejer farverne rundt om et centralt punkt i en cirkulær bevægelse, svarende til farverne på et farvehjul.

Styring af retning og form

For at kontrollere, hvordan farverne bevæger sig gennem gradienten, bruger de forskellige typer specifikke parametre:

Vinkel for lineære og koniske gradienter

Når du vælger en lineær eller konisk gradient, kan du justere retningen med en numerisk vinkelværdi under Vinkel. Vinkelskyderen bestemmer retningen ud fra følgende regler:

  • 0° peger lodret opad.
  • 90° peger vandret mod højre.

Form for radiale gradienter

Radiale gradienter benytter ikke en vinkel. I stedet definerer du formen under Form. Her kan du vælge mellem:

  • Ellipse: Farverne spreder sig i en oval form, der tilpasser sig elementets proportioner.
  • Cirkel: Farverne spreder sig i en perfekt, ensartet cirkel uanset elementets højde og bredde.

Farvestoppenes funktion og placering

Et farvestop er en specifik farve, der er fastgjort til en bestemt position langs gradientens forløb.

  • Position: Positionen angives som en procentsats fra 0% til 100%. 0% repræsenterer gradientens startpunkt, mens 100% repræsenterer slutpunktet.
  • Standardopsætning: Den indledende gradient starter med to farvestop: #6366f1 0% og #ec4899 100%.
  • Tilføjelse af stop: Du kan tilføje flere farver for at skabe mere komplekse overgange. Nye farvestop, der tilføjes via knappen Tilføj farvestop, placeres automatisk på en standardposition på 50%.
  • Maksimumgrænse: Du kan konfigurere op til otte farvestop. Når du har tilføjet det maksimale antal på otte farvestop, deaktiveres knappen Tilføj farvestop. Du kan fjerne uønskede stop igen ved at klikke på Fjern farvestop.

Sådan bruges Gradient-generator

Værktøjet er opbygget, så du kan eksperimentere og finjustere din kode i realtid.

  1. Vælg type: Start med at vælge mellem Lineær, Radial eller Konisk (Conic) under Gradienttype.
  2. Indstil geometri: Juster vinklen under Vinkel (for lineære og koniske typer) eller vælg mellem Ellipse og Cirkel under Form (for radiale typer).
  3. Konfigurer farver: Juster farven under Farve på stop og positionen under Position for hvert enkelt farvestop. Tilføj eller fjern stop efter behov.
  4. Kopier koden: Under overskriften CSS finder du den færdige kode. Klik på knappen Kopier CSS. Når koden er kopieret til din udklipsholder, ændrer knappen tilstand for at vise, at koden er kopieret.

Behandling af data og privatliv

Når du bruger denne generator, foregår alt arbejde lokalt på din egen enhed. Hver gradient renderes direkte i din browser, og intet af det, du indstiller her, uploades til BroBroGo.

Ofte stillede spørgsmål (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.