What is the difference between circle and ellipse in radial gradients?

Circle maintains a uniform radius in all directions, while ellipse stretches to fill the element proportionally. Ellipse is the default.

Can I position the center off-center?

Yes. Set the x and y position independently. Values like 20% 80% place the center toward the lower-left of the element.

Set the outer color stop to the same color with 0% opacity (using rgba or hex with alpha). This creates a fade-to-transparent effect.

Yes. The standard radial-gradient() syntax is supported in all modern browsers without vendor prefixes.

Set center position, shape, and colors to generate a CSS radial-gradient snippet.

Center

Edge

Last updated: 2026-06-09 · Reviewed by Nham Vu