Gradientgenerator
CSS-gradientgeneratorn skapar linjära, radiella och koniska gradienter från två eller tre färger med förhandsvisning i realtid och background-CSS som är redo att kopiera.
Om verktyget
CSS-gradientgeneratorn skapar linjära, radiella och koniska gradienter från två eller tre färger med förhandsvisning i realtid och background-CSS som är redo att kopiera.
Så använder du det
- Välj typ av gradient: linear, radial eller conic.
- Ställ in vinkeln med reglaget (0–360°).
- Välj två färger, eller kryssa i Use 3 colors för att lägga till en tredje.
- Klicka på Copy CSS och klistra in background-regeln i din stilmall.
Bra att veta
- linear-gradient() blandar färger längs en rak linje som bestäms av en vinkel, där 90deg går från vänster till höger.
- radial-gradient(circle, …) sprider färgerna utåt från mitten.
- conic-gradient(from <angle>, …) sveper färgerna runt en mittpunkt, vilket är användbart för cirkeldiagram och färghjul.
- CSS-gradienter är bilder som renderas av webbläsaren, så de skalas till valfri storlek utan extra filstorlek.
- Alla tre gradientfunktionerna stöds i alla aktuella större webbläsare.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur gör jag en CSS-gradient?
Använd en gradientfunktion som bakgrund, till exempel background: linear-gradient(135deg, #1db954, #0a1628). Verktyget skriver den raden åt dig utifrån färgerna och vinkeln du väljer.
Vad är skillnaden mellan linjära, radiella och koniska gradienter?
Linjära gradienter ändrar färg längs en linje, radiella strålar ut från en mittpunkt och koniska roterar runt en mittpunkt som visarna på en klocka.
Kan en gradient ha fler än två färger?
Ja. CSS-gradienter tar hur många färgstopp som helst. Generatorn stöder två eller tre färger; du kan lägga till fler stopp i den kopierade CSS:en för hand.
Gör CSS-gradienter en webbplats långsammare?
Inte märkbart. De ritas av webbläsaren och kräver ingen bildnedladdning, så de är oftast lättare än gradientbilder.