Hopp til innhold

CSS Gradient Generator

Lag vakre CSS-fargeoverganger visuelt med live forhåndsvisning. Støtte for lineære, radiale og koniske gradienter. Legg til fargestopp, juster vinkler. Kopier CSS-kode. Gratis nettverktøy.

Gradienttype
90°
Fargestopp
CSS-utdata
 

Hva er CSS-gradienter?

CSS-gradienter lar deg vise jevne overganger mellom to eller flere spesifiserte farger. CSS tilbyr tre typer gradienter: linear-gradient (går i en rett linje), radial-gradient (stråler ut fra et senterpunkt) og conic-gradient (roterer rundt et senterpunkt).

Gradienttyper

Lineære gradienter overfører farger langs en rett linje definert av en vinkel. Radiale gradienter stråler utover fra et senterpunkt i en elliptisk eller sirkulær form. Koniske gradienter roterer fargeoverganger rundt et senterpunkt, som et fargehjul.

Fargestopp

Fargestopp definerer fargene i en gradient og deres posisjoner langs gradientlinjen. Du kan legge til flere stopp for å lage komplekse flerfargegradienter. Hver stopp har en fargeverdi og en valgfri posisjonsprosent.

Personvern

All gradientgenerering kjøres 100 % i nettleseren din. Ingen data sendes til noen server.