CSS-gradientgenerator
Designa linjära och radiala gradienter visuellt, och kopiera den färdiga CSS:en. Allt uppdateras i realtid i din webbläsare.
Hur man gör en CSS-gradient
- Välj linjär eller radial, ställ sedan in vinkeln för en linjär gradient.
- Välj färger för dina stopp och ställ in varje position från 0 till 100.
- Lägg till eller ta bort stopp för att forma övergången hur du vill.
- Kopiera den genererade CSS:en till din stilmall eller stilattribut.
Vanliga frågor
Vad är en linjär gradient?
En linjär gradient blandar färger längs en rak linje vid den vinkel du väljer, från 0 till 360 grader.
Vad är en radial gradient?
En radial gradient blandar färger utåt från en mittpunkt i en cirkulär eller elliptisk form.
Vad betyder positionsnumren?
Varje position är en procentandel längs gradienten, från 0% i början till 100% i slutet. Stopp sorteras automatiskt efter position.
Fungerar gradienten i alla webbläsare?
Ja. Den genererade CSS:en använder standardfunktionerna linear-gradient och radial-gradient som stöds av varje modern webbläsare.
Relaterade verktyg
Varför använda en gradientgenerator?
Använd CSS Gradient Generator för att designa mjuka färövergångar visuellt istället för att gissa värden i kod, och kopiera produktionsklar CSS omedelbart.
- Se gradienten ändras i realtid när du justerar färger, vinklar och stopp.
- Kopiera exakt, giltig CSS utan att leta efter syntaxfel.
- Bygg fler stopp bakgrunder för knappar, banderoller och sektioner på några sekunder.
Tips och begränsningar
Du kan lägga till så många färgstopp du vill, och generatorn behåller minst två så att gradienten alltid är giltig. Stopp sorteras efter position innan CSS genereras.