CSSGen.app

Radial Gradient Generator

Create CSS radial gradients specifying shapes (circle, ellipse), centers, sizes, and multiple color stops.

Shape
Sizing Keyword
Center X50%
Center Y50%

Color Stops

0%
100%
background: radial-gradient(circle farthest-corner at 50% 50%, #2563eb 0%, #020617 100%);

What is a Radial Gradient in CSS?

The radial-gradient CSS function creates an image consisting of a progressive transition between colors radiating from an origin point (center).

Why Use a CSS Radial Gradient?

Radial gradients are great for simulating light source glows, spotlights, or spherical textures, giving cards and hero backgrounds a high-end ambient atmosphere.

CSS Syntax & Controls

It is defined by its ending shape (circle or ellipse), size keyword, center position coordinates (e.g. at 50% 50%), and a series of color stops.

background: radial-gradient(<shape> <size> at <position>, <color-stops>);

Best Practices

  • Position the center of the gradient near the top edge to emulate a physical light shining down.
  • Blend dark backgrounds with dark radial highlights for premium dark mode overlays.

Common Mistakes

  • Using sharp contrast steps, creating rings instead of a smooth glow.

Step-by-Step Guide: How to Use this Generator

  1. Select the shape style (circle or ellipse).
  2. Drag coordinates to position the center point of the gradient.
  3. Adjust color stops to customize the blend range, then copy the background property.

Browser Compatibility

ChromeSafariFirefoxEdge
Yes (Full)Yes (Full)Yes (Full)Yes (Full)

Frequently Asked Questions (FAQ)

What is the difference between circle and ellipse shape?

A circle radial gradient keeps an equal radius in all directions. An ellipse radial gradient stretches to match the aspect ratio of its container.