Preview
Generert CSS
Graderingskontroller
Populære forhåndsinnstillinger
Eksempler på gradering
Utforsk disse fantastiske graderingseksemplene og bli inspirert til ditt neste prosjekt. Klikk på en hvilken som helst gradient for å laste den inn i generatoren.
Solnedgang rødme
En varm gradient inspirert av vakre solnedganger.
Havbris
En rolig gradient som fremkaller følelsen av kystvann.
Mint fusjon
En frisk og moderne gradient som kombinerer mint og himmelblått.
Frodig hage
En levende gradient som representerer naturens skjønnhet.
Kosmisk drøm
En magisk gradient inspirert av nattehimmelen.
Den gylne timen
En varm gradient som fanger essensen av skumring.
Dokumentasjon av gradering
Hva er CSS-gradienter?
CSS-gradienter lar deg vise jevne overganger mellom to eller flere farger. De kan brukes som bakgrunn for elementer og kommer i tre forskjellige typer:
- Lineære gradienter:Overgang farger langs en rett linje.
- Radiale gradienter:Overgang farger fra et midtpunkt og utover.
- Kjegle gradienter:Overgangsfarger rundt et midtpunkt i en sirkel.
Slik bruker du graderinger
Når du har generert en gradient ved hjelp av verktøyet vårt, kan du bruke CSS-koden i prosjektene dine:
- Kopier CSS-koden fra generatoren.
- Lim den inn i CSS-filen, eller bruk den innebygd i HTML-elementene.
- Bruk gradienten på et hvilket som helst element ved hjelp av
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- Bruk mer enn to farger for en mer kompleks graderingseffekt.
- Juster fargeposisjoner for å kontrollere hvor overganger forekommer.
- Kombiner flere graderinger for enda mer kreative effekter.
- For koniske gradienter skaper endring av sentrum interessante mønstre.
- Lagre favorittgraderinger for senere bruk.
Nettleser støtte
CSS-gradienter støttes bredt i moderne nettlesere. Det kan imidlertid hende at eldre nettlesere som Internet Explorer ikke gjengi dem riktig. Oppgi alltid en reservefarge:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
Om dette verktøyet
Vår CSS Gradient Generator er designet for å hjelpe utviklere og designere med å lage vakre gradienter uten problemer. Enten du jobber med et nettsted, en applikasjon eller bare vil eksperimentere med farger, gjør dette verktøyet det enkelt å generere den perfekte gradienten for prosjektet ditt.
Features
Lett å bruke
Intuitivt grensesnitt for å lage gradienter.
Responsivt design
Fungerer perfekt på alle skjermstørrelser.
Klar for kopiering og lim inn
Få ren CSS-kode umiddelbart.
Forhåndsinnstillinger tilgjengelig
Start med vakre forhåndsdefinerte graderinger.
Related Tools
CSS3 overgangsgenerator
Jevn opasitetsovergang
Generer CSS3-transformasjoner med letthet
Et kraftig, intuitivt verktøy for å lage komplekse CSS3-transformasjoner uten å skrive kode. Visualiser endringer i sanntid og kopier den genererte CSS-en for bruk i prosjektene dine.
Mindre til CSS-konverterer
Forvandle Less-koden din til CSS. Raskt, enkelt og sikkert.
Reaktiv energiomformer
Konverter reaktiv energi mellom ulike enheter med presisjon og letthet
Konverter JSON til Excel uten problemer
Transformer JSON-dataene dine til Excel-format med et enkelt klikk. Rask, sikker og fullstendig nettleserbasert.
Pantone til RGB
Konverter Pantone-farger til RGB-verdier for digital design