Radial Gradient Generator — Free CSS Radial Gradient Tool

Use the Radial Gradient Generator to build a custom radial-gradient() in seconds — drag to position, pick your colors, and copy the CSS or Tailwind code. No signup required.

How the CSS radial-gradient() function works

A CSS radial gradient blends two or more colors outward from a center point, rather than in a straight line like a linear gradient. The radial-gradient() function takes three parts: a shape (circle or ellipse), a size keyword that controls how far the gradient extends, and a list of color stops with optional position percentages.

The size keyword determines where the gradient’s outer edge lands:

• farthest-corner (the default) — extends to the corner of the container farthest from the center point, so the full gradient is always visible
• closest-side — stops at the nearest edge, producing a tighter, more contained effect
• closest-corner — stops at the nearest corner
• farthest-side — extends to the farthest edge, but not the corner

A basic example looks like this:

background: radial-gradient(circle at 50% 50%, #0F0D72 0%, #FFC502 100%);

This reads as: draw a circular gradient centered at 50% from the left and 50% from the top, starting navy at the center and fading to gold at the edge. Every value the generator above outputs follows this same structure — shape, size, position, then color stops in order.

Radial vs. linear gradient — when to use which

The core difference is direction: a linear gradient moves along a straight line at a set angle, while a radial gradient radiates outward from a point. That distinction drives which one fits a given design.

Radial gradients work well for effects that need a visual center — spotlight or glow effects behind a hero heading, soft vignettes around a card, button hover states that feel like they’re lighting up from the middle, or background accents that draw the eye to one focal point. Linear gradients suit edge-to-edge transitions — page backgrounds, banner overlays, and anywhere the color shift should feel directional rather than centered.

A quick way to decide: if the design has a clear focal point the color should emanate from, reach for radial. If it’s a flat wash across a surface, linear is usually the better fit.

Using radial gradients in Tailwind CSS

Tailwind CSS doesn’t ship a built-in utility class for arbitrary radial gradients, so the standard approach is Tailwind’s arbitrary value syntax with the bg-[...] bracket notation. This lets you drop a full CSS radial-gradient() expression directly into a class name:

<div class="bg-[radial-gradient(circle_at_50%_50%,_#0F0D72_0%,_#FFC502_100%)]"></div>

Note that spaces inside the bracket value must be written as underscores, since Tailwind parses the class name as a single token. The Tailwind tab in the generator above formats this automatically, so the output can be pasted straight into a class attribute without manual edits. If a gradient is reused across multiple components, it’s worth extracting it into a custom utility in the Tailwind config instead of repeating the arbitrary value each time.

Repeating radial gradients explained

Adding the word “repeating” before radial-gradient tells the browser to tile the same color-stop sequence outward indefinitely, instead of stopping once at the final stop. This is what creates concentric ring patterns, target-style effects, and pulsing background textures.

background: repeating-radial-gradient(circle at 50% 50%, #0F0D72 0%, #FFC502 10%, #0F0D72 20%);

The distance between the first and last color stop defines the width of one repeating “band” — a smaller gap between stops produces tighter, more frequent rings, while a larger gap produces broader ones. Toggling the “Repeating gradient” checkbox in the generator switches the output between the two function names without changing anything else in the configuration.

FAQ

How do I create a radial gradient in CSS?
Use the radial-gradient() function with a shape, size, position, and at least two color stops, then apply it to the background property — for example, background: radial-gradient(circle at center, #0F0D72, #FFC502);. The generator above builds this string visually and copies it to your clipboard.

What’s the difference between circle and ellipse in radial-gradient()?
circle forces the gradient shape to be perfectly round regardless of the container’s proportions, while ellipse — the default — stretches the gradient to match the container’s width and height. Use circle when you want a consistent round shape on any element, and ellipse when the gradient should fill a rectangular container naturally.

How do I make a repeating radial gradient?
Swap radial-gradient() for repeating-radial-gradient() and keep the color stops close together — the browser repeats that stop pattern outward to fill the element. Check the “Repeating gradient” box in the tool above to preview this instantly.

How do I use a radial gradient in Tailwind CSS?
Wrap the CSS gradient value in Tailwind’s arbitrary value syntax: bg-[radial-gradient(...)], replacing spaces with underscores. The Tailwind tab in the generator formats the output correctly for you.

Can I use a radial gradient as a WordPress background image directly?
Yes — most WordPress block editors (including Cover and Group blocks) accept a CSS gradient value in the background settings, and many themes let you paste custom CSS gradients into a block’s “Advanced” panel or a custom CSS field. Copy the CSS output from the generator and paste it wherever the theme accepts a background value.