CSS-gradientgenerator

Visuell CSS-gradientgenerator för linjära, radiella och koniska gradienter: sätt färgstopp, justera vinkeln och kopiera CSS-koden. Perfekt för bakgrunder och knappar, gratis i webbläsaren.

Upprepa

각도: 135deg

Färgstopp

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Bädda in

<iframe src="https://devtools.patrache.studio/sv/generators/css-gradient/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="CSS-gradientgenerator — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/sv/generators/css-gradient/">CSS-gradientgenerator</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Senast uppdaterad: 2026 · Gratis onlineverktyg

Vad är CSS-gradientgenerator?

Visuell CSS-gradientgenerator för linjära, radiella och koniska gradienter: sätt färgstopp, justera vinkeln och kopiera CSS-koden. Perfekt för bakgrunder och knappar, gratis i webbläsaren.

Så använder du

1
Välj typ— Välj gradienttyp (linjär, radiell, konisk).
2
Justera färgstopp— Justera färg och position för varje färgstopp.
3
Förhandsgranska— Kontrollera resultatet i realtid i förhandsgranskningen.
4
Kopiera CSS-kod— Kopiera CSS-koden till urklipp med knappen 'Kopiera'.

Relaterade verktyg

CSS box-shadow-generatorCSS-box-shadow-generator med reglage för offset, oskärpa, spridning, färg och inset samt liveförhandsvisning. Kopiera färdig box-shadow-CSS, gratis i webbläsaren.

CSS border-radius-generatorCSS-border-radius-generator med åtta oberoende hörnhandtag och reglage samt liveförhandsvisning av den rundade formen. Kopiera färdig border-radius-CSS, gratis i webbläsaren.

FärgkodskonverterareFärgkonverterare mellan HEX-, RGB-, HSL- och OKLCH-koder, med WCAG-kontrastvärdet för två färger. Så kontrollerar du tillgängligheten medan du väljer palett, gratis i webbläsaren.

SVG-våggeneratorGratis online SVG-vågsgenerator med visuell editor för mjuka vågformer. Justera amplitud, färger och lager, använd färdiga förinställningar och kopiera CSS- och SVG-koden för bakgrunder och avdelare.

Vanliga frågor

Det finns ingen gräns, men 2–6 är typiskt. För många kan påverka prestandan.

Ja. Aktivera kryssrutan 'Upprepa' för att lägga till repeating-prefixet.

Fem förinställningar erbjuds: Sunset, Ocean, Forest, Midnight och Rainbow.

För närvarande produceras bara ren CSS. Tailwind-konvertering planeras för en framtida uppdatering.

Nej. All bearbetning sker i webbläsaren.