Slik bruker du det
- Velg lineær, radiell eller konisk, og angi deretter vinkelen eller senterposisjonen.
- Angi farge, opasitet og posisjon for hvert stopp. Legg til opptil seks stopp eller fjern dem du ikke trenger.
- Sjekk forhåndsvisningen, og kopier deretter CSS-linjen inn i stilarket ditt.
Slik fungerer det
Resultatet er en standard CSS-bakgrunnsdeklarasjon. Lineære gradienter går langs en vinkel: 0deg går fra bunn til topp, 90deg fra venstre til høyre, 180deg fra topp til bunn. Radielle gradienter spres fra et midtpunkt som en sirkel eller en ellipse som passer til boksen. Koniske gradienter sveiper rundt et midtpunkt og starter ved den valgte vinkelen, noe som er nyttig for kakediagram-lignende effekter og fargehjul.
Stopp skrives i rekkefølgen av posisjonene sine, slik at du kan dra posisjonene fritt. Et stopp med redusert opasitet skrives som rgba(), noe som lar bakgrunnen skinne gjennom. To stopp på samme posisjon skaper en hard kant i stedet for en jevn overgang, som er hvordan striper lages.
Alle tre gradientfunksjonene fungerer i alle nåværende nettlesere. Gradienter blandes i sRGB-fargerommet som standard, noe som kan se litt grått ut mellom komplementærfarger (for eksempel blått og gult); å legge til et midtre stopp med en klarere farge unngår det.
Eksempler
Dempet topptekstbakgrunn
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) gir en myk overgang fra topp til bunn som holder mørk tekst lesbar.
Skarpkantede striper
Bruk fire stopp: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. De to stoppene på 50 % møtes uten overgang, noe som gir to ensfargede halvdeler.
Spotlys-effekt
En radiell gradient (sirkel øverst til venstre) fra rgba(255, 255, 255, 0.6) til rgba(255, 255, 255, 0) lagt over en farge gir et mykt lys i hjørnet.
Ofte stilte spørsmål
Hvilken retning går 0deg?
I CSS peker 0deg oppover, så gradienten starter nederst og slutter øverst. 90deg går fra venstre til høyre. Dette skiller seg fra enkelte designverktøy, der 0° ofte betyr fra venstre til høyre.
Kan jeg bruke gradienten på tekst?
Ja: bruk bakgrunnen, og legg deretter til background-clip: text og color: transparent. Sjekk at teksten holder seg lesbar mot siden i hele gradienten.
Trenger jeg leverandørprefikser som -webkit-linear-gradient?
Nei. Moderne nettlesere støtter syntaksen uten prefiks. Prefikser er bare nødvendige for nettlesere som er mange år gamle.
Personvern
Alt genereres i nettleseren din. Fargene og innstillingene dine blir hverken sendt eller lagret.