Softonic

CSS-gradientgenerator

Steg 1 / 2
Nästa

En gradient kan ge knappar, kort, hero-sektioner och badges en välputsad look utan en enda bildfil. Den här generatorn skriver CSS:en åt dig: välj en linjär eller radiell gradient, välj två färger, ställ in vinkeln vid behov och kopiera den färdiga background-deklarationen direkt till din stilmall.

Så bygger du en gradient

  1. 1

    Välj gradienttyp

    Linjär för en rak övergång längs en vinkel, eller radiell för att sprida färgerna utåt från en mittpunkt.

  2. 2

    Välj två färger

    Ange två hexfärger (till exempel #2563eb och #16a34a) i de två färgfälten.

  3. 3

    Ställ in vinkeln (endast linjär)

    Vinkeln i grader: 0deg pekar uppåt, 90deg åt höger, 180deg nedåt. Radiella gradienter ignorerar vinkeln.

  4. 4

    Generera CSS:en

    Verktyget bygger `background:`-deklarationen med dina värden.

  5. 5

    Kopiera koden

    Kopiera den enda deklarationsraden och klistra in den i din stilmall, i regeln för elementet du vill styla.

Linjära gradienter

background: linear-gradient(135deg, #2563eb, #16a34a);

Vinkeln går medurs från toppen: 0deg = upp, 90deg = höger, 180deg = ner, 270deg = vänster. Du kan också skriva namngivna riktningar för hand: to right motsvarar 90deg och to bottom left motsvarar 135deg.

Radiella gradienter

background: radial-gradient(circle, #2563eb, #16a34a);

Färgerna sprids från elementets mitt utåt. Radiella gradienter använder ingen vinkel; lägg till positions- eller storleksnyckelord för hand (at 30% 40%, ellipse) när du behöver mer kontroll.

Färgstopp

CSS-gradienter kan ha fler än två färger, och varje stopp kan ha en position:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Två stopp på samma position skapar ett hårt stopp: färgen byts direkt i stället för att blandas. Användbart för delade bakgrunder.

Tips

  • En gradient från rött till blått passerar en gråaktig mittpunkt i den förvalda sRGB-interpoleringen. Att interpolera i oklch håller blandningen färgglad: linear-gradient(in oklch, red, blue), som stöds av moderna webbläsare.
  • transparent är inte färglöst: i sRGB är det rgba(0,0,0,0), så en toning till transparent passerar mörkgrått. Använd rgba(color, 0) i stället.
  • Gradienter renderas på GPU:n i moderna webbläsare och kostar nästan ingenting i någon storlek. Animation mellan gradienter stöds inte och byter abrupt; animera i stället opaciteten hos ett extra lager.
  • Textfyllning: kombinera deklarationen med background-clip: text; color: transparent; för att fylla text med en gradient. För ramar fungerar border-image: linear-gradient(...) 1; i moderna webbläsare.

Vanliga frågor

Linjär för riktade övergångar, som en knapp eller en hero som går uppifrån och ner eller från hörn till hörn. Radiell för spotlight- och glödeffekter, där färgerna sprids utåt från en mittpunkt.

Vinkeln ställer in övergångens riktning för linjära gradienter: 0deg pekar uppåt, 90deg åt höger och så vidare medurs. Radiella gradienter ignorerar vinkeln.

Den förvalda sRGB-interpoleringen beräknar medelvärdet av färgkomponenterna, vilket ger en omättad mittpunkt. Interpolera i oklch i stället (linear-gradient(in oklch, red, blue)) för att hålla blandningen färgglad genom mitten.

CSS kan inte interpolera mellan två background-image-värden, bytet är abrupt. Vanliga lösningar: animera opaciteten hos en överlagd gradient, eller flytta background-position över en större fast gradient.

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.

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.

Referens för kortkommandon

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

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Slumpmässig färggenerator

Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.