Radial gradients in CSS

So we all see these beautiful backgrounds on various websites , have you ever wondered how to make those ?

Syntax quick reference

background-image: radial-gradient([<shape> || <size>] [at <position>], <color-stop1>, <color-stop2>, ...);

That’s the basic form. Let’s break down every part.

1. Shape

The shape can be circle or ellipse. If you don't specify the shape, the browser assumes ellipse by default.

circle

ellipse

2. Size (radius)

You can specify sizes in absolute units (px, em) or percentages, or use keywords such as closest-side, farthest-corner, etc. For a circle you typically give one radius, e.g. circle 500px. For an ellipse you can give two radii: the horizontal radius first, then the vertical radius (e.g. ellipse 80% 60%).

Note: percentages are relative to the size of the box (for ellipse: first percentage is relative to the box width, second to the box height).

3. Position

at <x> <y> sets the gradient center. Examples:

at 50% 50% - center
at 50% 200px - horizontally centered, 200px from the top
keywords like top left, center, bottom also work ( but those are for losers )

at 50% 50% (center)

at 20% 80% (left-bottom)

at 80% 20% (right-top)

4. Color stops

When you give a color, also give it a stop, the position up to which that color stays solid. For example, red 50% means the center out to 50% of the radius is pure red.

radial-gradient(circle, red 10%, yellow 30%, green 60%)

How this works:

From 0% → 10%: The fill is solid red from the center until 10%.
From 10% → 30%: red smoothly transitions into yellow (an orange-like mix appears between these stops).
From 30% → 60%: yellow gradually blends into green (a yellow-green mix between these stops).
Beyond 60%: the color remains pure green unless additional stops are specified.

Note: the percentage you put after a color defines the pointup to which that color stays solid. Blending happens between the stops, not before them.

Note : - Use rgba(...) to tune opacity per stop

5. Transparency and RGBA

CSS supports multiple color formats (hex, HSL/HSLA, named colors, etc.) but we’ll use rgba(r, g, b, a) here for easy transparency control and zux i like it :)

rgb(0,0,0) is opaque black; rgba(0,0,0,0) is fully transparent.
The a (alpha) value ranges from 0 (fully transparent) to 1 (fully opaque).
The transparent keyword is equivalent to rgba(0,0,0,0).

Examples

Example: a centered circular glow

.element {
  background-image: radial-gradient(circle 500px at 50% 200px, #3e3e3e, transparent);
}

Centered circular glow - shape: circle 500px; position: 50% 200px; colors: #3e3e3e → transparent

If you omit explicit stop positions, the first color starts at the center (0%), and the last color reaches 100% of the defined radius.

We’ll take this as an example and understand:

shape - circle 500px
position - 50% 200px (shifts the gradient’s center to 50% horizontally and 200px from the top)
colors - #3e3e3e,transparent. No percentages given: #3e3e3e starts at 0% (fully opaque at the center) and blends smoothly into transparent, which is at 100% at the edge of the circle.

Note: the radius defines the exact distance from the center to the edge where the gradient fully transitions to the last color stop. For an ellipse, we provide two values - the first is the horizontal radius (width/2) and the second is the vertical radius (height/2). If only one is provided, the other scales with the container (parent element).

Example: elliptical soft spotlight over a black background

.element {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 80, 120, 0.25), transparent 70%),
    #000000;
}

Elliptical spotlight

shape - ellipse 80% 60% (horizontal radius 80% relative to the element’s width; vertical radius 60% relative to its height)
position - 50% 0% (perfectly centered on the x‑axis and at the top on the y‑axis)
colors - rgba(255, 80, 120, 0.25) (r=255, g=80, b=120, alpha=0.25) that fades to transparent at 70% of the ellipse radius.

Try switching theme of website : all the other gradient colors will change, except this one because we set a black base (#000000) after the gradient. Background images are layered; the first gradient is drawn on top and the last at the bottom. Here, #000000 simply paints a black base; removing it makes the background see‑through.

Example: dramatic lens-like gradient

.element {
  background: radial-gradient(125% 125% at 50% 10%, #fff 40%, #6366f1 100%);
}

Lens-like gradient

shape - not specified, so CSS assumes an ellipse with radii 125% 125%
position - 50% 10% (centered horizontally; 10% from the top)
colors - pure white from 0→40%, then white blends into #6366f1 up to 100%.

Layering multiple radial gradients

You can stack multiple radial gradients to get depth:

.element {
  background-image:
    radial-gradient(circle at 50% 100%, rgba(70,85,110,0.5) 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(99,102,241,0.4) 0%, transparent 70%),
    radial-gradient(circle at 50% 100%, rgba(181,184,208,0.3) 0%, transparent 80%);
}

Layered circles - First listed gradient sits on top; last is at the bottom

When stacking multiple radial-gradient() layers, ordering matters: the first gradient is drawn on top; the last is at the bottom.

If you still didn't understand then ngmi.

If you want to learn cool stuff like this, follow me on X (@kanak_k365).

Want more great gradients? Visit PatternCraft made by @meghtrix.