Handytool
UtviklerGratisKjøres lokalt

CSS gradient-generator

Bygg lineær, radiell og konisk CSS-gradienter — dra stopper, velg farger, kopier CSS-en.

Forhåndsvisning
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Type
Forhåndsinnstillinger

Legg til opptil seks fargestoppingsteder, dra posisjonsregulator og kopier CSS.

Om CSS gradient-generator

Handy tools CSS gradient-generator bygger lineær, radiell og konisk gradienter med opptil seks fargestopper. Dra en stopps posisjon, endre dens farge, bytt gradienttype, og live forhåndsvisningen og CSS-erklæringen oppdateres øyeblikkelig. Start fra en av de innebygde forhåndsinnstillingene — Lime Swiss, Sunset, Sky, Aurora — eller design ditt eget fra bunnen av.

Funksjoner i CSS gradient-generator

  • 01

    Lineær, radiell og konisk

    Lineær er den daglige bakgrunnsgradienten; radiell er flott for høydepunkter og vignettering; konisk er perfekt for sektordiagrammer, fargehjul og roterende bakgrunner.

  • 02

    Opptil seks fargestopper

    Legg til og fjern stopper, angi hver ones posisjon med en skyver, og velg dens farge via systemfargevelgeren eller en hex-verdi. Stopper blir automatisk omsortertert etter posisjon.

  • 03

    Kopierbar CSS-erklæring

    Utgangen er en komplett background: ... erklæring som du kan lime inn direkte i et stilark, en stilkomponent eller en Tailwind vilkårlig-verdi klasse.

Vanlige spørsmål om CSS gradient-generator

Hva er forskjellen mellom lineær, radiell og konisk?
Lineære gradienter kjører i en rett linje i en gitt vinkel; radielle gradienter sprer seg utover fra et sentrum; koniske gradienter feier rundt et punkt som en klokkehånd. Hver passer til en annen visuell effekt.
Hvor mange fargestopper skal jeg bruke?
To stopper er den klassiske tofargegradient. Tre eller fire lar deg lage realistiske overganger (solnedgang, aurora). Mer enn seks har en tendens til å se støyende ut — det er derfor denne generatoren begrenses til seks.
Kan jeg bruke dette for bakgrunner i en e-postmal?
De fleste e-postklienter støtter fortsatt ikke moderne CSS-gradienter pålitelig — gi en fast fallback-farge i tillegg til bakgrunnsgradienten hvis du kopierer dette til en e-postmal.
Er utgangen piksel-nøyaktig?
Ja — forhåndsvisningen gjenngis av nettleserens native gradient-motor, så det du ser er det CSSen din vil produsere.

Relaterte verktøy

Utvikler →

Utforsk flere verktøy

Alle verktøy →