Hoppa till innehåll
TextArray
100% lokalt

CSS-gradientgenerator

Generera CSS linjära och radiella gradientdeklarationer med anpassade färger och vinklar.

Utmatning

CSS-gradientgenerator

En CSS-gradientgenerator skapar bakgrundsgradientdeklarationer på några sekunder. Linjära gradienter flyter i en enda riktning, perfekt för subtila bakgrunder eller iögonfallande överlägg. Radiella gradienter kommer från en mittpunkt, perfekt för spotlight-effekter eller mjuka färgövergångar. Välj din gradienttyp, ställ in vinkeln för linjära gradienter (0–360 grader) och välj två färger – hex-koder, RGB, RGBA eller namngivna färger fungerar alla. Verktyget genererar en komplett CSS-bakgrundsegenskap redo att klistra in i din stilmall.

Gradienter är ett av de mest mångsidiga designelementen i modern CSS. De minskar filstorleken jämfört med bildbakgrunder, skalas oändligt och animerar smidigt i webbläsare. Liveförhandsvisningen visar exakt hur din gradient ser ut när du justerar färger och vinklar. Kopiera resultatet och använd det på valfritt element – en sidbakgrund, en knapp, ett hjälteavsnitt eller ett kortöverlägg.

Allt körs i din webbläsare, så dina färgval och inställningar förblir privata. Ingen data skickas någonstans. Verktyget fungerar även offline, så att du kan skapa övertoningar var som helst, när som helst. Oavsett om du designar en webbplats, skapar en prototyp för en app eller bara experimenterar med färgkombinationer, snabbar denna generator upp ditt arbetsflöde. Justera vinkeln, byt färger och se CSS-uppdateringen direkt.

FAQ

Vad är en CSS-gradient?
En CSS-gradient är en mjuk färgövergång som återges direkt av webbläsaren. Linjära gradienter övergår längs en linje; radiella gradienter utgår från en mittpunkt. Båda är lätta, skalbara och kan animeras.
Vilken vinkel använder jag för olika riktningar?
För linjära gradienter: 0° är från vänster till höger, 90° är uppifrån och ner, 180° är från höger till vänster, 270° är från botten till toppen. Alla vinklar mellan 0 och 360 grader fungerar. Radiella gradienter använder inte en vinkel.
Kan jag använda vilket färgformat som helst?
Ja. Hexkoder (#FF0000), RGB (rgb(255, 0, 0)), RGBA med genomskinlighet (rgba(255, 0, 0, 0,5)), HSL och namngivna färger (röd, blå) fungerar alla i CSS-gradienter.
Skickas mina färgdata någonstans?
Nej. Det här verktyget körs helt i din webbläsare. Dina färger, vinklar och inställningar lämnar aldrig din enhet.