CSS-gradientgenerator

Slik bruker du CSS-gradientgeneratoren

1. Velg en Gradienttype: Lineær, Radial eller Konisk. Den store forhåndsvisningen øverst oppdateres ved hver endring.
2. For en lineær gradient setter du Vinkel med glidebryteren eller skriver den inn i grader (90° går fra venstre til høyre, 180° fra topp til bunn). For en konisk gradient er vinkelen der sveipet starter.
3. For radiale og koniske gradienter flytter du midtpunktet med Midtpunkt X og Midtpunkt Y. En radial gradient kan være en Sirkel eller en Ellipse (menyen Form).
4. Rediger Fargestopp. Klikk hvor som helst på linjen for å legge til et stopp der, med fargen gradienten allerede har i det punktet, eller bruk Legg til stopp for å fylle det bredeste gapet. Dra i et håndtak for å flytte det. Hvert stopp har også en rad der du kan velge fargen, skrive en hvilken som helst CSS-farge, sette Posisjon (%) eller Fjern det (en gradient beholder minst to stopp).
5. Du kan også huke av for Gjentakende, velge Fargeinterpolasjon, klikke på Snu for å snu stoppene eller på Tilfeldig gradient for inspirasjon.
6. Kopier resultatet fra CSS-kode med Kopier.

Tastatur: sett et håndtak på linjen i fokus, og bruk piltastene for å flytte det 1 % (10 % med Shift), Home og End for å hoppe til endene, og Delete for å fjerne det.

Alt skjer i nettleseren din. Ingenting du skriver inn, sendes til en server.

De tre gradientfunksjonene

• linear-gradient() blander farger langs en rett linje. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) går fra indigo til venstre til rosa til høyre. Vinkler måles med klokken fra toppen: 0deg peker opp, 90deg mot høyre.
• radial-gradient() stråler ut fra et midtpunkt. radial-gradient(circle at 30% 40%, …) plasserer midtpunktet 30 % fra venstre og 40 % fra toppen. En ellipse strekker seg med boksen, en sirkel forblir rund.
• conic-gradient() sveiper rundt et midtpunkt som viserne på en klokke. conic-gradient(from 0deg at 50% 50%, …) lager fargehjul, sektordiagrammer og spinner-effekter. Stoppposisjoner er andeler av hele runden.

Alternativet Gjentakende bruker repeating-linear-gradient() og de tilsvarende funksjonene: mønsteret som stoppene dine definerer, gjentas til boksen er fylt. Sett det siste stoppet godt under 100 % (for eksempel 20 %) for å se striper eller ringer.

To stopp i samme posisjon gir en hard kant i stedet for en overgang, og det er slik striper og flagg lages. Generatoren holder stoppene sortert etter posisjon i koden, slik CSS krever.

sRGB- eller OKLCH-interpolasjon

Som standard blander nettleserne gradientfarger i sRGB. Mellom to mettede farger, som blått og gult, gir det ofte en kjedelig grå eller gjørmete midte. CSS Color Level 4 lar deg velge interpolasjonsrom: linear-gradient(90deg in oklch, …) blander i det perseptuelle OKLCH-rommet og holder midten levende.

Med OKLCH (jevnere, med sRGB som reserve) skriver verktøyet to background-deklarasjoner: først den klassiske sRGB-versjonen, deretter OKLCH-versjonen. Nettlesere som støtter interpolasjonsrom (Chrome og Edge 111+, Safari 16.2+, Firefox 127+) bruker den andre linjen. Eldre ignorerer den og beholder den første.

Tips

• Farger med gjennomsiktighet godtas i stoppfeltene, for eksempel #00000080 eller rgb(0 0 0 / 50%), noe som er praktisk for overlegg på bilder.
• Koden skrives med background. Bruk background-image i stedet hvis du setter andre bakgrunnsegenskaper hver for seg.
• Diskrete gradienter (to nære nyanser av samme farge) ser som regel mer profesjonelle ut enn regnbuer.