CSS Gradient Generator

What is a Radial Gradient?

Probably the second most common type of gradient, the radial-gradient().

To create a radial gradient you must define at least two colors, and their value can be any type of color format (e.g. Hex, named colors, rgba, hsla, etc.).

The gradient shape can be "circle" or "ellipse", and if not specified it defaults to "ellipse", while the position, which can be interpreted in the same way as "background-position", if not specified will default to "center" and meaning the gradient will go from inside (start-color) to outside (end-color).

Syntax

background: radial-gradient(shape-position, start-color, ..., end-color);

Example

background: radial-gradient(ellipse at center, #8986DF, #7A136A);

More examples

background: radial-gradient(circle at top left, #FDBB2D, #22C1C3);

background: radial-gradient(circle, #FFFFFF 0%, #FFD200 40%, #F7971E 100%);

Common uses

• Spotlight and glow effects
• Badges and notification dots
• Button hover highlights
• Vignette overlays on photos

Browser compatibility

You can read more information about browser compatibility here. For maximum cross-browser compatibility and coverage, it's important that you use CSS prefixes. You can use this tool to append CSS prefixes to your CSS code.

FAQ

What's the difference between "circle" and "ellipse"?

"circle" keeps the gradient perfectly round regardless of the element's shape; "ellipse" (the default) stretches to match the element's width and height.

How do I move the center of a radial gradient?

Use the "at" keyword with a position, e.g. radial-gradient(circle at top left, ...) or radial-gradient(circle at 30% 70%, ...).