Free CSS Radial Gradient Generator

Design radial gradients with circle or ellipse shapes, click-to-set positioning, and multiple color stops. Copy CSS, Tailwind, or SCSS code instantly.

How CSS Radial Gradients Work

The CSS radial-gradient() function creates a gradient that radiates outward from a center point. The simplest form — radial-gradient(#f093fb, #f5576c) — creates an elliptical gradient centered in the element. Colors transition from the center outward, with the first color at the center and the last color at the edges.

Shape and Size Options

Radial gradients support two shapes: circle maintains equal radii regardless of container aspect ratio, while ellipse (the default) stretches to fill the container. Four size keywords control the gradient's extent: closest-side, farthest-side, closest-corner, and farthest-corner.

Positioning the Center Point

Control where the gradient originates with the at keyword: radial-gradient(circle at 25% 75%, ...). In this tool, simply click on the preview to set the center point, or use the X/Y input fields for precise positioning.

Create your radial gradient below.

Click preview to set position
Color Stops
background: radial-gradient(circle at 50% 50%, #667eea 0%, #764ba2 100%);

What Is the Radial Gradient Generator?

This free tool creates CSS radial gradients visually. Choose between circle and ellipse shapes, set the center point by clicking on the preview, adjust color stops with the interactive bar, and copy production-ready code in CSS, Tailwind, SCSS, or CSS Variables format. The live preview updates instantly so you can see exactly how your gradient will look before copying the code.

How to Use This Tool

Step 1: Select the Radial tab. The tool opens with the radial gradient type pre-selected. You can switch between circle and ellipse shapes at any time.

Step 2: Position the center. Click anywhere on the gradient preview to move the center point. Alternatively, type precise X% and Y% values in the position fields.

Step 3: Edit colors. Click on color stops to change their colors. Drag stops to reposition them. Click on empty space on the bar to add new stops.

Step 4: Copy your code. Choose your format (CSS, Tailwind, SCSS, or CSS Variables), click Copy Code, and paste it into your project.

Key Features

Circle and ellipse shapes. Toggle between perfectly round circles and container-matching ellipses with a single click. The preview updates instantly to show the difference.

Click-to-position. Click anywhere on the live preview to set the gradient's center point. This is far more intuitive than typing coordinates manually. Fine-tune with the X/Y percentage inputs if you need exact values.

Multiple preview modes. See your radial gradient as a background fill, applied to text, on a frosted-glass card, or as a button. This helps you visualize how the gradient will look in a real UI context.

120+ preset library. Browse curated gradients and click to load them as a starting point. Every preset can be further customized with the editor controls.

Circle vs Ellipse — When to Use Each

The circle shape produces a perfectly round gradient with equal horizontal and vertical radii. It looks the same regardless of whether the container is square, wide, or tall. This makes circles ideal for spotlight effects, decorative orbs, and button highlights where you want consistent roundness.

The ellipse shape (the default) stretches to match the container's aspect ratio. In a wide container, the ellipse is wider than it is tall. This creates a more natural-looking gradient that fills the space evenly. Ellipses are the better choice for full-section backgrounds, banner images, and any element where you want the gradient to feel like it belongs in the space.

A practical rule of thumb: use circles for decorative accents and small elements, use ellipses for background fills. When combining with off-center positioning, circles create dramatic directional lighting effects, while ellipses produce softer ambient glows.

Frequently Asked Questions

What is a CSS radial gradient?

A radial gradient radiates outward from a center point in a circular or elliptical shape. Unlike linear gradients that follow a straight line, radial gradients create spotlight or orb-like effects.

Circle vs ellipse — when should I use each?

Use circle for a perfectly round gradient that looks the same regardless of the container's aspect ratio. Use ellipse (the default) when you want the gradient to stretch to match the container shape. Circles work great for spotlight effects; ellipses blend more naturally into rectangular containers.

How do I change the center position?

Click anywhere on the preview to set the gradient center, or type exact X% and Y% values in the position fields. Use the quick presets for common positions like center, corners, and edges.

What are the size keywords?

CSS provides four size keywords: closest-side (gradient reaches the nearest edge), farthest-side (reaches the farthest edge), closest-corner, and farthest-corner (default). Each controls how far the gradient extends.

Can I create a spotlight effect?

Yes. Use a circle shape with a light color at the center fading to a dark color at the edge. Move the center position off-center for a directional spotlight. Combine with a dark background for maximum impact.

Is this radial gradient generator free?

Completely free. No signup, no limits. All processing happens in your browser. Create unlimited gradients and copy code with one click.

Related Tools

CSS Gradient Generator

All gradient types in one tool

Color Picker & Converter

Pick colors and convert between HEX, RGB, HSL

Image Compressor

Compress images to exact file sizes

QR Code Generator

Create custom QR codes