Radiell gradient i CSS: form, størrelse og plassering

En radiell gradient i CSS blander farger utover fra et punkt, som lys fra en lampe. Du skriver den med radial-gradient() og bruker den der CSS godtar et bilde, vanligvis background-image. Uten innstillinger tegner den en ellipse midt i boksen som når det fjerneste hjørnet: radial-gradient(#fef3c7, #b45309) gir et lyst sentrum som gløder utover mot dyp rav.

Alt annet i funksjonen endrer én av tre ting: formen, størrelsen og plasseringen. Når du styrer disse, kan samme funksjon tegne glød, spotlys, vignettering, solstråler og fargefeltene bak en mesh-gradient i CSS. Designbruken av radielle overganger finner du i den tilhørende guiden til radielle gradienter.

Syntaksen til radial-gradient()

/* shape  size          position        stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)

/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)

Én regel overrasker mange: størrelsen på en sirkel må være en lengde, som 200px, aldri en prosent, fordi en prosent av et rektangel ikke gir én bestemt radius. Ellipser godtar prosenter, som i ellipse 60% 40%. MDNs referanse for radial-gradient() viser hele syntaksen.

Sirkel eller ellipse

En ellipse strekker seg med boksen, så på et bredt banner er gløden bred, og på en høy story er den høy. En sirkel holder seg rund uansett hva boksen gjør. Bruk ellipser til bakgrunner som skal fylle beholderen jevnt, og sirkler til noe som skal oppfattes som en lyskilde, en planet eller gløden rundt en knapp.

Størrelsesord: fra closest-side til farthest-corner

Størrelsen bestemmer hvor det siste fargestoppet havner, altså hvor gradientens sluttform ligger. De fire nøkkelordene måler fra midtpunktet til nærmeste eller fjerneste side eller hjørne i boksen. De ser bare ulike ut når midtpunktet er forskjøvet, så alle eksemplene under starter ved 30% 40%.

I praksis passer closest-side til avgrensede former som prikker og merker, fordi fargen aldri går utenfor nærmeste kant. farthest-corner passer til bakgrunner, fordi blandingen dekker hele boksen. Når du trenger nøyaktig kontroll, oppgir du en lengde: circle 180px at 50% 0 er en glød på 180 piksler som henger fra toppkanten.

Plassering med at

Nøkkelordet at plasserer midtpunktet med samme verdier som background-position: nøkkelord som at top right, prosenter som at 20% 80% eller lengder som at 40px 60px. Midtpunktet kan til og med ligge utenfor boksen, som i at 50% 120%, noe som gir en horisontglød som stiger opp nedenfra.

Radiell glød i lag

Den mest nyttige radielle oppskriften er flere gradienter stablet i én background-image, hver tonet ut til transparent, over en ensfarget mørk bunn. Hvert lag er et lysfelt på sin egen plass. Fordi det første laget tegnes øverst, setter du den sterkeste, minste gløden først.

.glow {
  background-color: #0b0a1a;
  background-image:
    radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
    radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}

To andre oppskrifter dekker de fleste øvrige behov. En vignettering gjør kantene mørkere: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)) lagt over et foto. Et spotlys følger pekeren når du henter posisjonen fra egendefinerte egenskaper, som radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), med noen linjer JavaScript som setter --x og --y ved pointermove.

Gjentakende radielle gradienter

repeating-radial-gradient() gjentar stoppene utover til boksen er fylt, slik at et par harde stopp blir til ringer. Bruk lengder for stopposisjonene så ringbredden holder seg konstant. Dette er grunnlaget for bølger, målskiver og rasterlignende teksturer. Guiden til CSS-mønstre viser mer.