Viktigste punkter
- 01Alle tre CSS-gradienttyper — lineær, radiell og konisk — støttes med live forhåndsvisning.
- 02Legg til opptil seks fargestoppere, hver med uavhengig posisjon og farge.
- 03Utdataene er en komplett bakgrunnsdeklarasjon klar til å limes inn i ethvert stilark.
- 04Ingen pålogging, ingen installasjon, og ingenting blir lastet opp — alt kjøres i nettleseren din.
Hvorfor bruke en visuell gradientgenerator?
Å skrive CSS-gradienter for hånd blir kjedelig raskt. Syntaksen er leselig når du først vet det, men å velge eksakte stoppposisjoner og farger uten visuell forhåndsvisning gjør en enkel designbeslutning til prøving-og-feil i DevTools. En generator lar deg se resultatet i sanntid og eksportere ren kode når det ser riktig ut.
Dette verktøyet støtter alle tre moderne gradienttyper. Lineær er den klassiske retningsbestemte blanding du bruker til herobackgrunn og knapper. Radiell spreader utover fra et punkt — flott for spot-belysningseffekter og vinjetter. Konisk feier rundt et sentrum, noe som gjør det til valget for kakegrafsegmenter, farghjul og spinner-indikatorer. Start fra en av de innebygde forvalgte innstillingene (Lime Swiss, Sunset, Sky, Aurora) eller design fra grunnen.
Hvordan generere en CSS-gradient
Hele prosessen tar under et minutt.
- 01
Velg en gradienttype
Velg Lineær, Radiell eller Konisk fra typevelgeren. For lineær må du også sette vinkelen. Forhåndsvisningen oppdateres øyeblikkelig.
- 02
Legg til og plasser fargestoppere
Klikk Legg til stoppere for å sette inn en ny stoppere, og dra glideren eller skriv inn en prosentandel for å plassere den. Opptil seks stoppere støttes — stoppere omsorter seg automatisk etter posisjon.
- 03
Velg hver stopperes farge
Klikk fargeprøven for å åpne systemets fargevelger, eller skriv en heksdesimalverdi direkte. Både RGB- og heksformater fungerer.
- 04
Forhåndsvis i sanntid
Forhåndsvisningspanelet gjengi din gradient med nettleserens innebygde gradient-motor, så resultatet samsvarer nøyaktig med hva CSS vil produsere i produksjon.
- 05
Kopier CSS-deklarasjonen
Klikk Kopier for å få den komplette background: linear-gradient(...)-deklarasjonen. Lim den inn i et stilark, en utformet komponent eller en Tailwind vilkårsverdi som bg-[<value>].
Vanlige bruker av gradient
Hver gradienttype er overlegen i et annet scenario.
- 01Hero-seksjonsbackgrunner — lineær gradient på 135° for en moderne diagonal feie.
- 02Knapp hover-tilstander — subtil to-stopps lineær gradient for dybde.
- 03Radiell spotlight eller vinjett — mørk-til-gjennomsiktig radiell på en bildelegg.
- 04Kakediagrammer og framgangskretser — konisk gradient med harde stopp.
- 05Farghjul-velgere for forhåndsvisning — fullt spektrum konisk gradient.
- 06Tekstgradienter — bruk gradienten på bakgrunnen, og bruk deretter background-clip: text.
Kjøres helt i nettleseren din
Gradient-generatoren kjøres 100% på klientsiden — ingen data sendes til noen server. Forhåndsvisningen gjengis av nettleserens egen CSS-motor, noe som betyr at det du ser samsvarer med hva en hvilken som helst besøkende nettleser vil gjengi med samme CSS.
En praktisk merknad: e-postklienter har fortsatt flekkvis støtte for CSS-gradienter. Hvis du limer generert CSS inn i en HTML-e-postmal, legger du til en solid background-color fallback før gradient-deklarasjonen slik at mottakere på eldre klienter ser noe rimelig.
CSS Gradient Generator FAQ
Hva er forskjellen mellom lineær, radiell og konisk gradienters?
Lineære gradienter overgår langs en rett linje i en gitt vinkel. Radiale gradienter spreader utover fra et midtpunkt — nyttig for høydepunkter og spot-effekter. Koniske gradienter feier rundt et sentrum som klokkehender — ideelt for kakesegmenter og farghjul.
Kan jeg bruke dette for Tailwind CSS-prosjekter?
Ja. Kopier den genererte verdien og bruk den som en Tailwind vilkårsverdi, for eksempel: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind vil inkludere det i stilarket ditt.
Stemmer forhåndsvisningen nøyaktig med det jeg vil se på nettstedet?
Ja — forhåndsvisningen gjengis av samme nettleser gradient-motor som vil gjengi din live CSS, så utdataene er pikselnøyaktige.
Kan jeg bruke CSS-gradienter i e-postmaler?
De fleste e-postklienter støtter ikke CSS-gradienter pålitelig. Legg alltid til en solid background-color før din gradient-deklarasjon som fallback.
Er det en grense for antall fargestoppere?
Generatoren støtter opptil seks stopp. For de fleste design er to til fire nok; mer enn seks pleier å redusere klarhet i stedet for å legge til rikdom.