Developer Tools

CSS Gradient Generator

🔒 Kjører i nettleseren din

Create linear, radial, and conic CSS gradients with a live preview. Copy the CSS instantly. Free, runs in your browser.

Slik bruker du dette verktøyet

  1. Velg gradienttype, retning og fargestopp.
  2. Forhåndsvis den direkte gradienten og juster til du er fornøyd.
  3. Kopier den genererte CSS-koden inn i stilarket ditt.
Color stops
0%
100%
CSS
background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);

Ofte stilte spørsmål

Sender gradientgeneratoren dataene mine til en server?
Nei. All gradientgjengivelse og CSS-kodegenerering skjer helt i nettleseren din. Ingenting overføres noe sted.
Hvilke typer gradienter kan jeg lage?
Du kan lage CSS lineære gradienter (retningsbestemte fargeoverganger) og radiale gradienter (sirkulære eller elliptiske). Begge støtter flere fargestopp.
Kan jeg bruke utdataene direkte i CSS-en min?
Ja. Verktøyet gir klar-til-bruk CSS-kode som du kan kopiere og lime direkte inn i stilarket ditt.
Støtter det flere fargestopp?
Ja. Du kan legge til så mange fargestopp du trenger og justere posisjonene deres langs gradientaksen.
guide

How to Create a CSS Gradient (Linear, Radial, Conic)

Build CSS gradients with a live preview tool — no coding required. Copy the CSS and paste directly into your stylesheet.

Flere gratisverktøySe alle 492 →
Merge PDFsCompress ImageJSON FormatterPassword GeneratorVAT CalculatorQR Code Generator
CSS Gradient Generator | brevio