Softonic

CSS-gradientgenerator

Steg 1 / 3
Typ
Nästa

Moderna UI-bakgrunder använder sällan en platt färg, hjältesektioner, knappar och kort använder nästan alla en CSS-gradient. Den här generatorn låter dig välja linjär eller radiell, släppa in så många färgstopp du vill, ställa in vinkeln (för linjär) eller formen (för radiell), och kopiera ett rent background: linear-gradient(…)-värde redo att klistra in i ditt stilark.

Så bygger du en CSS-gradient

  1. 1

    Välj gradienttyp

    Linjär (riktning efter vinkel) eller radiell (cirkel/ellips).

  2. 2

    Ställ in vinkeln eller formen

    Linjär: 0–360°. Radiell: cirkel eller ellips.

  3. 3

    Lägg till färgstopp

    Varje stopp är en färg plus en position (0–100%). Gradienter med två stopp är baslinjen; tre stopp och fler ger jämnare övergångar.

  4. 4

    Kopiera CSS:en

    Utdatan är ett enda `background`-egenskapsvärde som du kan klistra in i valfri CSS-fil.

Syntax-fusklapp

/* Linjär */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* Radiell (cirkel) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* Flerstopps */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

Vinklar som faktiskt matchar intuition

CSS-gradientvinklar skiljer sig från trigonometri: 0deg pekar upp (norr), 90deg pekar höger (öster), 180deg ner, 270deg vänster.

Riktning Vinkel
Topp till botten 180deg
Botten till topp 0deg
Vänster till höger 90deg
Övre vänster till nedre höger 135deg

Att undvika grumliga mellantoner

Linjära gradienter mellan komplementära färger (t.ex. blå → orange) passerar genom ett grått band runt 50% där blandningen känns “död”. Åtgärda det genom att:

  • Lägga till ett mellanstopp i en närbesläktad kulör (blå → lila → orange).
  • Använda OKLCH-interpolering (linear-gradient(in oklch, ...)) för perceptuellt jämnare blandningar, stöds i alla moderna webbläsare sedan 2024.
  • Förskjuta en ändpunkt något i kulör så att mellantonen hamnar i en varmare familj.

Prestandatips

Gradienter målas av GPU:n och är oftast billiga. Att animera en (background-position-trick, SVG-oskärpa) kan ändå slå mot ritkostnaden, testa på en mellanklasstelefon innan du levererar.

Vanliga frågor

CSS-gradienter mäter vinkel medurs från toppen, medan standardmatematik mäter moturs från höger. 90deg i CSS pekar höger; i trigonometri skulle det vara 0°.

Specifikationen tillåter valfritt antal. I praktiken tenderar fler än 4–5 stopp att kännas som en regnbåge; två eller tre välvalda stopp ser nästan alltid renare ut.

Ja, klistra in den som ett godtyckligt värde: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". För återanvändbara gradienter, definiera en anpassad utility i din Tailwind-konfiguration.

Den vanliga editorn skickar gradientinställningarna till servern för att rendera förhandsvisningen. I det guidade flödet visas även typ, vinkel, form och färgstopp i sidans URL. Ange inte känslig information; verktyget sparar inget återanvändbart gradientprojekt.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Markdown-förhandsvisare

Skriv Markdown och se den renderade HTML:en uppdateras live. GitHub-flavored syntax med tabeller, uppgiftslistor, inramad kod och autolänkar.

Verktyget finns på andra språk