Kortversionen
- En radiell CSS-gradient sprider färg utåt från en mittpunkt och skrivs med funktionen radial-gradient() överallt där CSS tar emot en bild.
- Som standard är en radiell gradient en ellips, centrerad i rutan och stor nog att nå det bortersta hörnet.
- Storleksnyckelorden closest-side, closest-corner, farthest-side och farthest-corner avgör var det sista färgstoppet hamnar.
- Nyckelordet at flyttar mitten, till exempel at 20% 30%, och positionerna fungerar som background-position.
- Att lägga flera radiella gradienter som tonar ut till genomskinliga över varandra är standardsättet att bygga mjuka sken och meshliknande bakgrunder i CSS.
På den här sidan
En radiell CSS-gradient blandar färg utåt från en punkt, som ljus som sprider sig från en lampa. Du skriver den med radial-gradient() och använder den överallt där CSS tar en bild, oftast background-image. Utan några alternativ ritar den en ellips i mitten av rutan som når det bortersta hörnet: radial-gradient(#fef3c7, #b45309) ger en blek mitt som glöder ut till djup bärnsten.
radial-gradient(#fef3c7, #f59e0b 45%, #78350f)Allt annat i funktionen ändrar en av tre saker: formen, storleken och positionen. När du kan styra dem ritar samma funktion sken, strålkastare, vinjetter, solstrålar och färgpölarna bakom en mesh-gradient i CSS. För designsidan av radiella övergångar, se den tillhörande guiden om radiella gradienter.
Syntaxen för 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ärden | Standard |
|---|---|---|
| Form | circle eller ellipse | ellipse |
| Storlek | ett nyckelord, en längd för en cirkel, eller två längder eller procentvärden för en ellips | farthest-corner |
| Position | at följt av vad som helst som background-position accepterar | at center |
| Interpolation | in oklab, in oklch och andra färgrymder | sRGB för hexfärger |
| Färgstopp | två eller fler färger med valfria positioner | obligatoriskt |
En regel förvånar många: en cirkels storlek måste vara en längd som 200px, aldrig procent, eftersom procent av en rektangel inte har någon enskild radie. Ellipser accepterar procent, som i ellipse 60% 40%. MDN:s referens för radial-gradient() listar hela grammatiken.
Cirkel eller ellips
En ellips sträcks med rutan, så på en bred banner blir skenet brett och på en hög story blir det högt. En cirkel förblir rund vad rutan än gör. Använd ellipser för bakgrunder som ska fylla sin behållare jämnt, och cirklar för allt som ska läsas som en ljuskälla, en planet eller en knapps sken.
Storleksnyckelord: closest-side till farthest-corner
Storleken avgör var det sista färgstoppet hamnar, alltså var gradientens slutform ligger. De fyra nyckelorden mäter från mitten till rutans närmaste eller bortersta sida eller hörn. De ser bara olika ut när mitten ligger vid sidan om centrum, så exemplen nedan börjar alla vid 30% 40%.
I praktiken passar closest-side för avgränsade former som prickar och märken, eftersom färgen aldrig rinner över närmaste kant. farthest-corner passar bakgrunder, eftersom blandningen täcker hela rutan. När du behöver exakt kontroll anger du en längd: circle 180px at 50% 0 är ett sken på 180 pixlar som hänger från överkanten.
Positionera med at
Nyckelordet at placerar mitten med samma värden som background-position: nyckelord som at top right, procent som at 20% 80% eller längder som at 40px 60px. Mitten kan till och med ligga utanför rutan, som i at 50% 120%, vilket ger ett horisontsken som stiger upp under nederkanten.
Lagrade radiella sken
Det mest användbara radiella mönstret är flera gradienter staplade i en enda background-image, var och en tonad till transparent, över en jämn mörk färg. Varje lager är en ljuspöl på sin egen plats. Eftersom det första lagret målas överst lägger du det ljusaste, minsta skenet 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%);
}Två mönster till täcker det mesta som återstår. En vinjett mörkar kanterna: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)) över ett foto. En strålkastare följer pekaren när du matar in dess position från anpassade egenskaper, som radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), med några rader JavaScript som sätter --x och --y vid pointermove.
Repeterande radiella gradienter
repeating-radial-gradient() upprepar sina stopp utåt tills rutan är full, så ett par hårda stopp blir ringar. Använd längder för stoppositionerna så att ringbredden hålls konstant. Det är grunden för vågor, måltavlor och halvtonsliknande texturer, och guiden om CSS-mönster tar upp mer.
Undvik
- Procent för en cirkels storlek, vilket är ogiltigt
- Ljusa sken som slutar i en hård kant eftersom det sista stoppet är ogenomskinligt
- Att centrera varje sken vid 50% 50%
- Fem överlappande sken med lika stor styrka
Gör så här
- Längder för cirklar, procent för ellipser
- Tona varje sken till
transparent - Placera sken vid sidan om mitten, nära hörn eller under kanten
- Ett dominerande sken och ett eller två lugnare
Vanliga frågor
Hur gör jag en cirkelgradient i CSS?
Använd radial-gradient(circle, färg1, färg2). Med circle förblir formen rund, utan det får du en ellips som sträcks med rutan.
Hur flyttar jag mitten på en radiell gradient?
Lägg till at och en position efter formen och storleken, till exempel radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b). Positionerna fungerar som background-position.
Vad betyder farthest-corner?
Det gör gradienten så stor att dess sista färgstopp når det hörn av rutan som ligger längst från mitten. Det är standardstorleken.
Kan en radiell cirkelgradient ha en storlek i procent?
Nej. En cirkel behöver en enda längd som 200px. Ellipser kan använda två procentvärden, som ellipse 60% 40%.
Hur gör jag en glödeffekt med CSS-gradienter?
Lägg ett eller flera radial-gradient()-värden som tonar från en halvgenomskinlig färg till transparent över en mörk background-color.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
