Kort fortalt
- En CSS radial gradient spreder farve udad fra et midtpunkt og skrives med funktionen radial-gradient() overalt, hvor CSS accepterer et billede.
- Som standard er en radial gradient en ellipse, centreret i boksen og dimensioneret til at nå det fjerneste hjørne.
- Størrelsesnøgleordene closest-side, closest-corner, farthest-side og farthest-corner afgør, hvor det sidste farvestop lander.
- Nøgleordet at flytter centrum, for eksempel at 20% 30%, og positioner virker som background-position.
- At lægge flere radiale gradienter, der falmer til transparent, i lag er den almindelige måde at bygge bløde skær og mesh-lignende baggrunde i CSS på.
På denne side
En CSS radial gradient blander farve udad fra et punkt, som lys, der spreder sig fra en lampe. Du skriver den med radial-gradient() og bruger den, hvor CSS tager et billede, som regel background-image. Uden indstillinger tegner den en ellipse midt i boksen, der når det fjerneste hjørne: radial-gradient(#fef3c7, #b45309) giver et blegt centrum, der gløder ud til dyb rav.
radial-gradient(#fef3c7, #f59e0b 45%, #78350f)Alt andet i funktionen ændrer en af tre ting: formen, størrelsen og positionen. Når du kan styre dem, tegner den samme funktion skær, spotlys, vignetter, solstråler og de farvepøle, der ligger bag en mesh gradient i CSS. For designsiden af radiale blandinger, se ledsageguiden om radiale gradienter.
Syntaksen for 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)| Del | Værdier | Standard |
|---|---|---|
| Form | circle eller ellipse | ellipse |
| Størrelse | et nøgleord, én længde til en cirkel eller to længder eller procenter til en ellipse | farthest-corner |
| Position | at efterfulgt af alt, background-position accepterer | at center |
| Interpolation | in oklab, in oklch og andre farverum | sRGB til hexfarver |
| Farvestop | to eller flere farver med valgfrie positioner | påkrævet |
Én regel fanger folk: en cirkels størrelse skal være en længde som 200px, aldrig en procent, fordi en procent af et rektangel ikke har nogen enkelt radius. Ellipser accepterer procenter, som i ellipse 60% 40%. MDN’s reference for radial-gradient() viser hele grammatikken.
Cirkel eller ellipse
En ellipse strækker sig med boksen, så på et bredt banner er skæret bredt, og på en høj story er det højt. En cirkel forbliver rund, uanset hvad boksen gør. Brug ellipser til baggrunde, der skal fylde deres beholder jævnt, og cirkler til alt, der skal læses som en lyskilde, en planet eller en knaps skær.
Størrelsesnøgleord: fra closest-side til farthest-corner
Størrelsen afgør, hvor det sidste farvestop lander, og det er der, gradientens slutform sidder. De fire nøgleord måler fra centrum til boksens nærmeste eller fjerneste side eller hjørne. De ser kun forskellige ud, når centrum ligger uden for midten, så alle eksemplerne herunder starter ved 30% 40%.
I praksis passer closest-side til afgrænsede former som prikker og badges, fordi farven aldrig løber ud over den nærmeste kant. farthest-corner passer til baggrunde, fordi blandingen dækker hele boksen. Når du har brug for præcis kontrol, så angiv en længde: circle 180px at 50% 0 er et skær på 180 pixel, der hænger fra overkanten.
Placering med at
Nøgleordet at placerer centrum med de samme værdier som background-position: nøgleord som at top right, procenter som at 20% 80% eller længder som at 40px 60px. Centrum kan endda sidde uden for boksen, som i at 50% 120%, der giver et horisontskær, der stiger op nedefra under bundkanten.
Lagdelte radiale skær
Det mest nyttige radiale mønster er flere gradienter stablet i ét background-image, hver falmende til transparent, oven på en flad mørk farve. Hvert lag er en pøl af lys på sin egen plads. Fordi det første lag males øverst, så læg det skarpeste og mindste skær 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 mønstre mere dækker de fleste resterende opgaver. En vignet mørkner kanterne: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)) lagt over et foto. Et spotlys følger markøren, når du giver dets position fra brugerdefinerede egenskaber, som radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), med et par linjer JavaScript, der sætter --x og --y ved pointermove.
Gentagende radiale gradienter
repeating-radial-gradient() gentager sine stop udad, til boksen er fuld, så et par hårde stop bliver til ringe. Brug længder til stoppositionerne, så ringbredden forbliver konstant. Det er grundlaget for krusning, skydeskive og halvtoneagtige teksturer, og guiden om CSS-mønstre har mere.
Undgå
- Procenter til en cirkels størrelse, som er ugyldige
- Lyse skær, der ender i en hård kant, fordi det sidste stop er ugennemsigtigt
- At centrere hvert skær ved 50% 50%
- Fem overlappende skær med lige stor styrke
Gør
- Længder til cirkler, procenter til ellipser
- Lad hvert skær falme til
transparent - Placér skær skævt, nær hjørner eller under kanten
- Ét dominerende skær og ét eller to mere dæmpede
Spørgsmål, folk stiller
Hvordan laver jeg en cirkelgradient i CSS?
Brug radial-gradient(circle, farve1, farve2). Tilføjer du circle, forbliver formen rund. Uden den får du en ellipse, der strækker sig med boksen.
Hvordan flytter jeg centrum af en radial gradient?
Tilføj at og en position efter form og størrelse, for eksempel radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b). Positioner virker som background-position.
Hvad betyder farthest-corner?
Den dimensionerer gradienten, så dens sidste farvestop når det hjørne af boksen, der er længst fra centrum. Det er standardstørrelsen.
Kan en cirkulær radial gradient bruge en procentstørrelse?
Nej. En cirkel skal have én længde som 200px. Ellipser kan bruge to procenter, som ellipse 60% 40%.
Hvordan laver jeg en glødeeffekt med CSS-gradienter?
Læg en eller flere radial-gradient()-værdier i lag, der falmer fra en halvgennemsigtig farve til transparent, oven på en mørk background-color.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
