Gratis omformer

CSS-gradient Generator

Generer visuelt CSS-gradienter med live forhåndsvisning. Lag lineære, radielle og koniske gradienter med tilpassede fargestopper – gratis og på klientsiden.

Live forhåndsvisning
CSS-utgang
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Vinkel (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Om dette verktøyet

Lag vakre lineære og radielle CSS-gradienter med en visuell editor. Velg farger, juster stopp, endre retning eller vinkel, og se live forhåndsvisningsoppdateringen i sanntid. Kopier den genererte CSS-koden – inkludert leverandørprefikser for eldre nettlesere – og lim den direkte inn i stilarket ditt.

Slik bruker du det

  1. Velg gradienttype: lineær eller radial.
  2. Legg til fargestopp ved å klikke på gradientlinjen og velge farger.
  3. Juster gradientvinkelen (lineær) eller posisjonen (radial) ved hjelp av kontrollene.
  4. Kopier den genererte CSS-koden fra utdatapanelet.

Ofte stilte spørsmål

Fungerer CSS-gradienter i alle nettlesere?
Moderne CSS-gradienter (lineær gradient, radial-gradient) støttes i alle nåværende nettlesere, inkludert Chrome, Firefox, Safari og Edge. Verktøyet kan valgfritt generere -webkit- prefikser for eldre nettleserversjoner.
Kan jeg lage multi-farge gradienter?
Ja. Legg til så mange fargestopper du trenger. Du kan også justere posisjonen til hvert stopp for å kontrollere hvor fargene blandes. Dette gir mulighet for komplekse regnbue-, solnedgangs- eller tilpassede merkegradienter.
Hva er forskjellen mellom lineære og radielle gradienter?
Lineære gradienter overfører farger langs en rett linje (topp til bunn, venstre til høyre, diagonal eller hvilken som helst vinkel). Radiale gradienter overfører farger utover fra et midtpunkt i en sirkulær eller elliptisk form.
Kan jeg bruke gradienten som bakgrunn for tekst?
Ja. Bruk bakgrunnsklipp: tekst med -webkit-text-fill-color: transparent for å bruke gradienten på tekst. Den genererte CSS-en gir gradientdefinisjonen - kombiner den med disse egenskapene for gradienttekst.