Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Radial Gradient Generator

Build a CSS radial gradient with a circle or ellipse shape, a draggable center, and as many color stops as you need, then copy the background code.

Preview

center 50% 50%

Click or drag anywhere on the preview to move the center. Everything runs in your browser. Nothing is uploaded.

Shape

Size

Center position

Color stops

Drag a stop to move it, click the bar to add one, or focus a stop and use the arrow keys.

  • #6366f1
  • #0b0f1a
CSS
background: radial-gradient(circle farthest-corner at 50% 50%, #6366f1 0%, #0b0f1a 100%);

How to make a CSS radial gradient

  1. Pick the shape and size

    Choose a circle for an equal radius in every direction or an ellipse that stretches to the shape of the box, then pick a size keyword that sets how far the gradient reaches before the last color holds.

  2. Place the center

    Click or drag anywhere on the preview to move where the blend starts, or type exact horizontal and vertical percentages, and nudge the center handle with the arrow keys for fine control.

  3. Edit the color stops

    Drag a handle along the bar to move a stop or click the bar to add one, and give each stop its own color, a 0 to 100 percent position, and a 0 to 100 percent opacity.

  4. Copy the CSS

    The background declaration under the preview always matches what you see, so click Copy CSS to take it into your stylesheet.

Why use this tool

Circle and ellipse shapes

Switch between a perfect circle with an equal radius in every direction and an ellipse that stretches to the width and height of the element.

Draggable center point

Click or drag anywhere on the preview to set where the gradient starts, or type exact horizontal and vertical percentages. The center handle also moves with the arrow keys.

Size keyword control

Pick closest-side, closest-corner, farthest-side, or farthest-corner to decide how far the gradient spreads before the final color takes over.

Unlimited color stops with transparency

Start with two stops and add as many as the design needs. Each has a color, a position, and an opacity, so you can fade a color all the way to transparent for glows and overlays.

Preview and code stay in sync

The swatch sits over a checkerboard so transparency is visible, and it shares the same state as the CSS below, so the copied code is exactly the rendered gradient.

Runs entirely in your browser

Everything happens on your device. There is no account, server, or quota, and nothing is uploaded.

About this tool

This radial gradient generator writes the CSS radial-gradient() value from a visual editor. A radial gradient blends colors outward from a center point, either as a perfect circle or as an ellipse that stretches to the shape of the box. Each color stop has its own color, a position from 0 to 100 percent along the radius, and an opacity, and you can add as many stops as the design needs. Drag the center directly on the preview to move where the blend starts, and pick a size keyword to control how far the gradient reaches before the last color holds.

Radial gradients are the quick way to build spotlights, glows, soft vignettes, and round button fills without opening an image editor. Per-stop opacity lets you fade a color all the way to transparent, so you can layer a radial glow over a photo or another background and keep whatever sits behind it. The preview sits over a checkerboard so transparency reads at a glance, and it shares the same state as the code below, so the copied CSS is exactly the gradient you see. The output is a complete background declaration that pastes into a stylesheet unchanged. For straight-line and cone blends, the gradient generator covers linear and conic types, and the box shadow generator handles the other half of giving an element depth.

Nothing is uploaded and there is no account; the gradient lives only in your browser tab. The color palette generator is a fast source of stop colors that already sit well together.

Frequently asked questions

How do I make a radial gradient?
Pick a circle or ellipse shape, set the size keyword, and place the center by clicking or dragging on the preview. Then edit the color stops, each with a color, a position from 0 to 100 percent, and an opacity. The preview and the CSS update instantly as you change anything.
What is the difference between a circle and an ellipse?
A circle has the same radius in every direction, so the blend stays perfectly round no matter the shape of the element. An ellipse stretches to the width and height of the box, so a wide element gets a wide, oval blend.
What does the size keyword do?
The size keyword sets how far the gradient spreads before the last color takes over. Closest-side and closest-corner end the blend at the nearest edge or corner, while farthest-side and farthest-corner reach the far edge or corner. Farthest-corner is the default.
Can I make a radial gradient with transparency?
Yes. Every color stop has an opacity from 0 to 100 percent. Set a stop to a lower opacity to fade it, or to 0 percent for a fully transparent edge, which is ideal for glows and overlays. The preview sits over a checkerboard so you can see exactly how transparent each part is.
How do I use the generated CSS?
Copy the CSS and paste it into your stylesheet. The output is a complete background declaration, so you can apply it to any element as a value for the background or background-image property.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server, stored, or logged.

Related tools