CSS Gradientgenerator
Vad är en CSS-gradient?
CSS-gradienter låter dig visa mjuka övergångar mellan två eller fler färger utan att använda bildfiler. De finns i tre typer: linear-gradient (längs en rak linje), radial-gradient (utstrålar från en mittpunkt) och conic-gradient (sveper runt en mittpunkt). Gradienter används för bakgrunder, knappar, överlägg och dekorativa element.
Så här använder du CSS Gradientgeneratorn
-
Välj en förinställning från färgproverna eller konfigurera din egen gradient.
-
Välj gradienttyp: linear, radial eller conic.
-
Justera vinkeln (för linear/conic) eller formen (för radial).
-
Redigera färgstopp — ändra färger och positioner (0–100%).
-
Lägg till eller ta bort färgstopp efter behov.
-
Kopiera CSS och klistra in det i ditt stylesheet.
Vanliga Frågor
Hur gör jag en transparent gradient? Använd rgba() eller hsla() färgvärden med en alfakanal på 0 för fullständig transparens. Till exempel är en färgstopp på rgba(0,0,0,0) helt transparent svart, användbar för uttoningsöverlag på bilder.
Hur gör jag ett hårt färgstopp (ingen övergång)? Placera två färgstopp på samma position — en som avslutar och en som börjar vid den punkten. Till exempel skapar röd 50%, blå 50% en omedelbar övergång från röd till blå vid mittpunkten utan gradientövergång.
Vilka webbläsare stöder koniska gradienter? Koniska gradienter stöds i alla moderna webbläsare (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). De stöds inte i Internet Explorer.
Kan jag använda flera gradienter på samma element? Ja. CSS background accepterar en kommaseparerad lista med lager. Du kan stapla gradienter, kombinera dem med bakgrundsbilder och kontrollera varje lagers position och storlek oberoende.
Keywords: CSS gradientgenerator, linjär gradient, radial gradient, konisk gradient, CSS bakgrundsgenerator, gradientfärgväljare, CSS gradient verktyg