CSS gradient generator

Skap lineære, radiale og koniske CSS-gradienter i nettleseren din.

Farge stopper

Bruk stop handlinger eller tastaturstråler for å redigere posisjoner. Hver stop inneholder en eksplisitt farge, opacity og prosentandel.

Klar

Nettleser-native lokal behandling

Gradientene dine er i denne nettleseren. Ingen farger eller genererte CSS sendes til Converter.

Begrenset innføringsgrammatikk

Importen aksepterer lineærgradient(), radialgradiant(), eller koniskgradienten() med hex farger og prosent. Deklarasjoner, URL-er, variabler og ukjente funksjoner blir avvist lokalt.

Tilgjengelig fallback

Den genererte CSS inneholder en solid bakgrunnsfarge fallback sammen med gradienten for ustøttet renderere og tilgjengelig kontrollkrem.

Ofte stilte spørsmål

Er gradientet oppført?

Gradient status, farger, importerte CSS og generert CSS forblir i nettleseren din.

Hvilke CSS gradienttyper støttes?

Generatoren skaper lineær-gradient(), radial-gradent() og konisk-gradyent() utgang med flere hex farge stopper.

Hva kan jeg importere?

Importen aksepterer en delvis begrenset grammatikk ved hjelp av en støttet gradientfunksjon, hex farger, valgfrie prosentandeler og begrensede vinkler eller posisjon verdier.

CSS gradient generator

Bygg lineære eller radiale CSS gradier og forhåndsvisning av farge stopper, hjørne, posisjon og repetisjon.

Inndata
Gradert type, farge stopper, posisjoner, hjørne og gjentatte innstillinger.
Resultat
Live preview og kopierbar CSS bakgrunnsdeklarasjon.
Faktiske begrensninger
Browser rendering kan variere litt av motoren, og verktøyet vurderer ikke kontrast eller garanterer støtte i arv nettlesere.
Personvern og databehandling
gradert type, farge stopper, posisjoner, vinkler og gjentatte innstillinger behandles i denne nettleser-tabellen Converter mottar ikke eller lagrer det; lukking eller omlasting av siden avslører arbeidsstatus med mindre verktøyet uttrykkelig tilbyr en lokal nedlasting.

Hvordan bruke dette verktøyet

  1. Gi gradent type, farge stopper, posisjoner, hjørner og gjentatte innstillinger i verktøykontroller.
  2. Velg innstillingene som påvirker en live forhåndsvisning og kopierbar CSS bakgrunnsdeklarasjon, og kjør deretter verktøyet.
  3. Se en live forhåndsvisning og kopierbar CSS bakgrunnsdeklarasjon før du kopiere eller laste ned den.

Vanlige feiltyper

En manglende farge stop, invalid farge eller uforenelig posisjon forhindrer en gyldig CSS-deklarasjon fra å bli bygget.

Nyttig eksempel

Skap en 90 graders lineær gradient fra #111827 på 0% til #f59e0b på 100% og kopi erklæringen.