CSS-gradientgenerator
Vad är CSS-gradientgenerator
En CSS-gradientgenerator låter dig bygga en linjär eller radiell gradient visuellt och kopiera den exakta CSS:en. Välj en gradienttyp, ställ in vinkeln (linjär) eller formen och positionen (radiell), lägg till så många färgstopp du behöver och dra vart och ett till rätt plats. Förhandsvisningen uppdateras direkt, och utdatarutan visar alltid en färdig bakgrundsdeklaration att klistra in.
Så använder du
- Välj Linjär eller Radiell som gradienttyp.
- Justera vinkelreglaget för linjära gradienter, eller välj en form och position för radiella.
- Ställ in färg och position för varje färgstopp och lägg till fler stopp med knappen Lägg till färgstopp.
- Kopiera den genererade CSS:en från utdatarutan och klistra in den i din stilmall.
När du använder det
Bygger du en hjältesektion och behöver en mjuk blå-till-rosa bakgrund? Ställ in två stopp vid 0 % och 100 %, välj en vinkel och kopiera background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); direkt in i din CSS. Lika behändigt för kortöverlägg, knappars hover-lägen eller ett radiellt sken bakom en logotyp, utan att finjustera gradientsyntax i devtools.
Vanliga frågor
Vad är skillnaden mellan en linjär och en radiell gradient?
En linjär gradient övergår mellan färger längs en rak linje i en vald vinkel. En radiell gradient strålar utåt från en mittpunkt i cirklar eller ellipser.
Hur många färgstopp kan jag lägga till?
Du kan lägga till så många stopp du behöver. Två räcker för en enkel övergång, men fler stopp låter dig skapa komplexa flerfärgade gradienter.
Vad betyder positionsprocenten på varje stopp?
Procenten anger var längs gradienten en färg når full styrka, från 0 % (start) till 100 % (slut). Att flytta ett stopp gör övergången skarpare eller mjukare.
Fungerar den genererade CSS:en i alla webbläsare?
Ja. linear-gradient och radial-gradient stöds i alla moderna webbläsare utan prefix. Utdatan är standard-CSS redo att användas.
Kan jag dela verktyget med min gradient ifylld?
Ja. Webbadressen uppdateras automatiskt medan du skriver. Kopiera den från adressfältet eller använd Dela-knappen — den som öppnar länken ser exakt dina värden redo att användas.
Relaterade verktyg
Bildförhållande Kalkylator
Räkna ut bildförhållandet, hitta saknad bredd eller höjd och ändra storlek på bilder och video utan att förvränga proportionerna. Gratis.
Streckkodsgenerator
Generera EAN-13- eller Code 128-streckkoder online. Ange ditt nummer eller text, ladda ner som SVG eller PNG. Gratis, ingen registrering behövs.
Base64-avkodare
Avkoda Base64-strängar till vanlig text direkt i din webbläsare. Stöder fullständig Unicode-utdata inklusive emojis. Gratis Base64-avkodare online.