CSS-gradientgenerator
색상 정지점
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Senast uppdaterad: 2026 · Gratis onlineverktyg
Vad är CSS-gradientgenerator?
Gratis visuell CSS-gradientgenerator: skapa linjära, radiella och koniska gradienter, justera färgstopp och vinkel och kopiera färdig CSS-kod för dina webbplatsbakgrunder.
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-generator Gratis online CSS box-shadow-generator med kontroller för offset, oskärpa, spridning, färg och inset, som ger en live-förhandsvisning av skuggan och skapar kopieringsklar box-shadow-CSS-kod.
CSS border-radius-generator Gratis online CSS border-radius-generator med åtta oberoende hörnhandtag och reglage, som ger en live-förhandsvisning av den rundade formen och skapar kopieringsklar border-radius-CSS-kod.
Färgkodskonverterare Gratis online färgkonverterare som direkt översätter mellan HEX-, RGB-, HSL- och OKLCH-koder och beräknar WCAG-kontrastförhållandet mellan två färger så att du enkelt kan kontrollera tillgänglighet.
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.