Gratis konverter

CSS-gradient Generator

Generer visuelt CSS-gradienter med live preview. Skab lineære, radiale og kegleformede gradienter med brugerdefinerede farvestop - gratis og på klientsiden.

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

Om dette værktøj

Opret smukke CSS lineære og radiale gradienter med en visuel editor. Vælg farver, juster stop, skift retning eller vinkel, og se live preview-opdateringen i realtid. Kopier den genererede CSS-kode – inklusive leverandørpræfikser til ældre browsere – og indsæt den direkte i dit stylesheet.

Sådan bruger du det

  1. Vælg gradienttype: lineær eller radial.
  2. Tilføj farvestop ved at klikke på gradientlinjen og vælge farver.
  3. Juster gradientvinklen (lineær) eller positionen (radial) ved hjælp af kontrollerne.
  4. Kopier den genererede CSS-kode fra outputpanelet.

Ofte stillede spørgsmål

Fungerer CSS-gradienter i alle browsere?
Moderne CSS-gradienter (lineær gradient, radial-gradient) understøttes i alle nuværende browsere, inklusive Chrome, Firefox, Safari og Edge. Værktøjet kan valgfrit generere -webkit- præfikser til ældre browserversioner.
Kan jeg oprette flerfarvede gradienter?
Ja. Tilføj så mange farvestop, som du har brug for. Du kan også justere placeringen af ​​hvert stop for at kontrollere, hvor farverne blandes. Dette giver mulighed for komplekse regnbue-, solnedgangs- eller brugerdefinerede mærkegradienter.
Hvad er forskellen mellem lineære og radiale gradienter?
Lineære gradienter overfører farver langs en lige linje (top til bund, venstre mod højre, diagonal eller enhver vinkel). Radiale gradienter overfører farver udad fra et midtpunkt i en cirkulær eller elliptisk form.
Kan jeg bruge gradienten som baggrund for tekst?
Ja. Brug baggrundsklip: tekst med -webkit-text-fill-color: transparent for at anvende gradienten på tekst. Den genererede CSS giver gradientdefinitionen - kombiner den med disse egenskaber for gradienttekst.