CSS Gradient Generator

Hva er CSS-gradienter?

CSS-gradienter skaper jevne, kontinuerlige overganger mellom to eller flere farger uten å bruke bilder. De gjengis direkte av nettleseren, noe som betyr at de skalerer til enhver oppløsning, lastes umiddelbart og produserer null HTTP-forespørsler. Gradienter er et av de kraftigste verktøyene i moderne CSS for å lage visuelt rike bakgrunner, knapper og dekorative elementer.

Det finnes to hovedtyper CSS-gradienter: lineære gradienter som går langs en rett linje, og radielle gradienter som stråler utover fra et midtpunkt. En tredje type, koniske gradienter, sveiper rundt et sentralt punkt som et fargehjul. Dette verktøyet fokuserer på lineære og radielle gradienter, som dekker de aller fleste designbehov.

CSS-gradientsyntaks

Funksjonen linear-gradient() tar en retning (vinkel eller nøkkelord) etterfulgt av fargestopp. Den grunnleggende syntaksen er background: linear-gradient(vinkel, farge1 posisjon1, farge2 posisjon2). Vinkelen er i grader — 0deg går fra bunn til topp, 90deg fra venstre til høyre, og 180deg fra topp til bunn. Du kan legge til så mange fargestopp som trengs.

Radielle gradienter bruker radial-gradient(form størrelse at posisjon, farge1, farge2). Formen kan være circle eller ellipse. Størrelsesordenene (closest-side, farthest-corner osv.) styrer hvor langt gradienten strekker seg. Hvis den utelates, bruker nettleseren standardverdier som vanligvis ser riktige ut.

Slik bruker du dette verktøyet

Velg fargene dine med fargevelgerne, juster gradientvinkelen med skyveknappen eller ved å skrive en gradverdi, og legg til eller fjern fargestopp etter behov. Verktøyet genererer CSS-koden i sanntid. Klikk kopier-knappen for å kopiere den komplette CSS-regelen til utklippstavlen, og lim den inn i stilarket ditt.

Designtips for gradienter

Subtile gradienter ser mer profesjonelle ut enn dramatiske. Et skifte på 10–20 grader i fargetone mellom to nært beslektede farger skaper et elegant, moderne uttrykk. Unngå å kombinere mer enn tre farger med mindre du bevisst ønsker en regnbueeffekt. Store områder drar nytte av myke gradienter, mens små brukergrensesnittelementer som knapper tåler kraftigere overganger.

For mørkmodus-design gir gradientoverlegg på mørke bakgrunner dybde uten å virke forstyrrende. Bruk halvgjennomsiktige fargestopp (rgba eller hsla) for å skape glasslignende effekter. Lag flere gradienter ved hjelp av komma i background-egenskapen for komplekse komposisjoner.

Ytelseshensyn

CSS-gradienter er GPU-akselererte og ekstremt ytelsessterke — langt bedre enn å laste gradientbilder. Svært komplekse gradienter med mange fargestopp kan imidlertid forårsake mindre gjengivelseforskjeller mellom nettlesere. Test alltid gradientene dine i Chrome, Firefox og Safari. Moderne nettlesere støtter gradienter uten leverandørprefikser, så -webkit-linear-gradient er ikke lenger nødvendig.

Ofte stilte spørsmål

Kan jeg animere CSS-gradienter?

CSS kan ikke animere gradientverdier direkte med transition. Du kan imidlertid animere background-position for en overdimensjonert gradient, bruke @property til å animere egendefinerte egenskaper inne i gradienter, eller krysstone mellom to gradienter ved hjelp av opacity på pseudoelementer.

Hva er forskjellen mellom lineære og radielle gradienter?

En lineær gradient overfører farger langs en rett linje med en angitt vinkel. En radiell gradient overfører farger utover fra et midtpunkt i en sirkulær eller elliptisk form. Velg lineær for bakgrunner og bannere, og radiell for spotlighteffekter eller knappeuthevinger.