CSS Gradientgenerator
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Hvorfor bruge en visuel gradientgenerator?
At skrive CSS-gradienter manuelt er besværligt. Vores visuelle generator lader dig styre farvestop med en farvevælger og positionsskydere, med realtidsopdatering direkte.
3 gradienttyper
Lineær, radial og konisk gradient — med dedikerede kontroller for hver type
Flerfarvet gradient
Tilføj ubegrænsede farvestop og træk positioner til komplekse gradienter
Realtidsforhåndsvisning
Se gradientrendering i realtid når du justerer farver, positioner og vinkel
Skab en CSS-gradient i 3 trin
Vælg gradienttype
Vælg lineær, radial eller konisk gradient og justér vinklen eller retningen
Justér farvestop
Angiv hvert stops farve med farvevælgeren og positionér med skydere
Kopiér CSS
Klik 'Kopiér CSS' for at få komplet background-egenskab til brug i dit stylesheet
Anvendelsesområder for CSS-gradienter
Hero-sektionsbaggrunde
Skab imponerende fuldskærmsbaggrunde med diagonale eller radiale gradienter
Gradienttekst
Anvend gradient på tekst med background-clip:text for fantastiske typografieffekter
Gradientkanter
Brug gradient med border-image til at skabe farverige rammer om elementer
Billedoverlejring
Læg gradient oven på billeder til mørk overlejring der sikrer tekstlæsbarhed
Bedste praksis for CSS-gradienter
✓ Brug 135deg til diagonale gradienter
135 graders vinkel skaber en klassisk diagonal fra øvre venstre til nedre højre — populært valg til hero-sektioner.
✓ Hold gradienter subtile i UI
I UI-elementer som knapper og kort, brug meget subtile gradienter med 10-20% lysforskel for dybde uden visuelt støj.
✓ Angiv en reservefarve
Tilføj en ensfarvet baggrundsfarve som reserve: background-color:#6366f1; background:linear-gradient(...).
✓ Animér gradientposition
Du kan ikke animere CSS-gradienter direkte, men du kan animere background-position på en større gradient for en glidende bevægelseseffekt.
❓ Ofte stillede spørgsmål
Hvad er forskellen mellem lineær, radial og konisk gradient?
Lineær gradient overgår langs en ret linje med en vinkel. Radial stråler ud fra et midtpunkt cirkulært eller elliptisk. Konisk roterer rundt om et midtpunkt — idealisk til cirkulære statusindikatorer.
Hvordan skaber man en gennemsigtig gradient?
Brug transparent som et farvestop: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Det skaber en gradient fra halvtransparent farve til helt gennemsigtig — ideelt til billedoverlejringer.
Hvorfor ser jeg båndning i min gradient?
Båndning (synlige linjer mellem farver) opstår på lavkvalitetsskærme eller ved overgange mellem lignende nuancer. Tilføj et mellemliggende farvestop for at blødgøre overgangen.
Kan en gradient bruges som kant?
Ja; brug border-image:linear-gradient(...) 1. Alternativt kan du bruge ::before pseudo-element med gradientbaggrund og negativt z-index til at simulere en gradientkant.