CSS Gradient Generator
Hvad er en CSS-gradient?
CSS-gradienter giver dig mulighed for at vise glatte overgange mellem to eller flere farver uden at bruge billedfiler. De findes i tre typer: linear-gradient (langs en ret linje), radial-gradient (udstrålet fra et centerpunkt) og conic-gradient (svinger rundt om et centerpunkt). Gradienter bruges til baggrunde, knapper, overlejringer og dekorative elementer.
Sådan bruges CSS Gradient Generator
-
Vælg en forudindstilling fra farveproverne, eller konfigurér din egen gradient.
-
Vælg gradienttype: linear, radial eller conic.
-
Juster vinklen (for linear/conic) eller formen (for radial).
-
Rediger farvestop — skift farver og positioner (0–100%).
-
Tilføj eller fjern farvestop efter behov.
-
Kopiér CSS og indsæt det i dit stylesheet.
Ofte Stillede Spørgsmål
Hvordan laver jeg en transparent gradient? Brug rgba() eller hsla() farveværdier med en alfa-kanal på 0 for fuld gennemsigtighed. For eksempel er en farvestop på rgba(0,0,0,0) fuldstændig transparent sort, nyttig til fade-out-overlays på billeder.
Hvordan opretter jeg et hårdt farvestop (uden overgang)? Placer to farvestops på samme position — en der slutter og en der starter på det punkt. For eksempel rød 50%, blå 50% skaber en øjeblikkelig skift fra rød til blå ved midtpunktet uden gradient overgang.
Hvilke browsere understøtter koniske gradienter? Koniske gradienter understøttes i alle moderne browsere (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). De understøttes ikke i Internet Explorer.
Kan jeg bruge flere gradienter på det samme element? Ja. CSS background accepterer en kommasepareret liste over lag. Du kan stable gradienter, kombinere dem med baggrundsbilleder og kontrollere hver lags position og størrelse uafhængigt.
Keywords: CSS gradient generator, lineær gradient, radial gradient, konisk gradient, CSS baggrundsgenerator, gradientfarvevælger, CSS gradient værktøj