CSS-gradientgenerator
Design lineære og radiale gradienter visuelt, og kopier derefter den klar-til-brug CSS. Alt opdateres live i din browser.
Hvordan laver man en CSS-gradient
- Vælg lineær eller radial, og indstil vinklen for en lineær gradient.
- Vælg farver til dine stop og indstil hver position fra 0 til 100.
- Tilføj eller fjern stop for at forme overgangen, som du ønsker.
- Kopier den genererede CSS ind i dit stylesheet eller style-attribut.
FAQs
Hvad er en lineær gradient?
En lineær gradient blander farver langs en lige linje i den vinkel, du vælger, fra 0 til 360 grader.
Hvad er en radial gradient?
En radial gradient blander farver udad fra et centerpunkt i en cirkulær eller elliptisk form.
Hvad betyder positionsnumrene?
Hver position er en procentdel langs gradienten, fra 0% i starten til 100% i slutningen. Stop sorteres automatisk efter position.
Fungerer gradienten i alle browsere?
Ja. Den genererede CSS bruger de standard lineær-gradient og radial-gradient funktioner, der understøttes af hver moderne browser.
Relaterede værktøjer
Hvorfor bruge en gradientgenerator?
Brug CSS Gradient Generator til at designe glatte farveovergange visuelt i stedet for at gætte værdier i kode, og kopier produktionsklar CSS øjeblikkeligt.
- Se gradienten ændre sig live, mens du justerer farver, vinkler og stop.
- Kopier præcise, gyldige CSS uden at lede efter syntaksfejl.
- Byg multi-stop baggrunde til knapper, bannere og sektioner på få sekunder.
Tips og Grænser
Du kan tilføje så mange farvestop, som du vil, og generatoren holder mindst to, så gradienten altid er gyldig. Stop sorteres efter position, før CSS genereres.