CSS Gradientgenerator
Hva er en CSS-gradient?
CSS-gradienter lar deg vise jevne overganger mellom to eller flere farger uten å bruke bildefiler. De finnes i tre typer: linear-gradient (langs en rett linje), radial-gradient (stråler ut fra et midtpunkt) og conic-gradient (svinger rundt et midtpunkt). Gradienter brukes til bakgrunner, knapper, overlegg og dekorative elementer.
Slik bruker du CSS Gradientgeneratoren
-
Velg en forhåndsinnstilling fra prøvene, eller konfigurer din egen gradient.
-
Velg gradienttype: linear, radial eller conic.
-
Juster vinkelen (for linear/conic) eller formen (for radial).
-
Rediger fargestoppene — endre farger og posisjoner (0–100%).
-
Legg til eller fjern fargestopp etter behov.
-
Kopier CSS og lim det inn i stilarket ditt.
Ofte stilte spørsmål
Hvordan lager jeg en transparent gradient? Bruk rgba() eller hsla() fargverdier med en alfakanal på 0 for full gjennomsiktighet. En fargstop på rgba(0,0,0,0) er for eksempel helt gjennomsiktig svart, nyttig for fade-out-overlays på bilder.
Hvordan lager jeg et hardt fargstop (ingen overgang)? Plasser to fargstop på samme posisjon — ett som slutter og ett som begynner på det punktet. For eksempel, rødt 50%, blått 50% skaper en øyeblikkelig bytte fra rødt til blått ved midtpunktet uten gradientovergang.
Hvilke nettlesere støtter conic gradients? Conic gradients støttes i alle moderne nettlesere (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). De støttes ikke i Internet Explorer.
Kan jeg bruke flere gradienter på samme element? Ja. CSS background aksepterer en kommaseparert liste over lag. Du kan stable gradienter, kombinere dem med bakgrunnsbilder og kontrollere posisjonen og størrelsen på hvert lag uavhengig.
Keywords: CSS gradientgenerator, lineær gradient, radial gradient, konisk gradient, CSS bakgrunnsgenerator, gradientfargevelger, CSS gradient verktøy