CSS-gradientgenerator
Design lineære og radiale gradienter visuelt, og kopier deretter den klare til bruk CSS-en. Alt oppdateres i sanntid i nettleseren din.
Hvordan lage en CSS-gradient
- Velg lineær eller radial, og sett deretter vinkelen for en lineær gradient.
- Velg farger for stoppene dine og sett hver posisjon fra 0 til 100.
- Legg til eller fjern stopp for å forme overgangen slik du ønsker.
- Kopier den genererte CSS-en inn i stilarket ditt eller stilattributtet.
Ofte stilte spørsmål
Hva er en lineær gradient?
En lineær gradient blander farger langs en rett linje i den vinkelen du velger, fra 0 til 360 grader.
Hva er en radial gradient?
En radial gradient blander farger utover fra et sentrumspunkt i en sirkulær eller elliptisk form.
Hva betyr posisjonsnumrene?
Hver posisjon er en prosentandel langs gradienten, fra 0% i starten til 100% på slutten. Stoppene sorteres automatisk etter posisjon.
Fungerer gradienten i alle nettlesere?
Ja. Den genererte CSS-en bruker standard lineær-gradient og radial-gradient-funksjoner som støttes av hver moderne nettleser.
Relaterte verktøy
Hvorfor bruke en gradientgenerator?
Bruk CSS Gradient Generator for å designe jevne fargeoverganger visuelt i stedet for å gjette verdier i kode, og kopier produksjonsklar CSS umiddelbart.
- Se gradienten endre seg i sanntid mens du justerer farger, vinkler og stopp.
- Kopier nøyaktig, gyldig CSS uten å lete etter syntaksfeil.
- Bygg multi-stopp bakgrunner for knapper, bannere og seksjoner på sekunder.
Tips og Begrensninger
Du kan legge til så mange fargestopp du vil, og generatoren beholder minst to slik at gradienten alltid er gyldig. Stoppene sorteres etter posisjon før CSS-en genereres.