Radial Gradient Generator
Generate CSS radial-gradient code with a live preview.
About the Radial Gradient Generator
Generates CSS for a radial gradient (color radiating from a center point) between two colors, with a live preview you can copy.
How to use
Enter the center and edge colors, then click Generate.
Worked example
#fde047 center to #f97316 edge → a sunburst effect.
How to use this calculator
- Choose the gradient shape, size, and center position.
- Pick the colors and decide where each color stop should appear.
- Adjust the values in the tool and watch the live preview update.
- Copy the generated CSS radial-gradient code into your stylesheet.
The formula explained
$$ \text{background} = \text{radial-gradient}(\text{shape size at position}, \text{color stop 1}, \text{color stop 2}, \dots) $$
- \(\text{shape}\) = The gradient shape, usually circle or ellipse
- \(\text{size}\) = How far the gradient spreads, such as closest-side or farthest-corner
- \(\text{position}\) = Where the gradient center sits, such as center or 20% 30%
- \(\text{color stop}\) = A color and optional stop position that defines how the gradient changes
Step by step method
- Start with the default gradient or enter your own shape, size, and position values.
- Add at least two colors so the tool can build a visible radial gradient.
- Set stop positions if you want tighter control over where each color begins and ends.
- Check the preview to confirm the gradient looks right, then copy the CSS output.
Worked example
Here is a simple example for a soft spotlight effect centered in the middle of a card.
- Choose a circle centered at the middle and use two colors, white at 0% and blue at 100%.
- The tool generates a CSS value like \(\text{radial-gradient}(\text{circle at center}, \text{white} 0\%, \text{blue} 100\%)\).
- Paste that into a CSS background property such as \(\text{background: radial-gradient(circle at center, white 0\%, blue 100\%);}\).
Answer. background: radial-gradient(circle at center, white 0%, blue 100%);
Tips and common mistakes
- Use contrasting colors if you want the shape of the gradient to stand out clearly.
- Move the position away from center to create a highlight or spotlight effect.
- Try different size keywords like closest-side and farthest-corner to change the spread.
- If the gradient looks harsh, add more intermediate color stops for a smoother blend.
Frequently asked questions
How is radial different from linear?+
Radial gradients spread outward from a point; linear gradients run along a line.
Can I change the shape?+
This uses an ellipse at center; edit the CSS for 'circle' or other positions.
More Tech Tools Tools
Explore related calculators in this category
Barcode Generator
Generate Code 128 / EAN barcodes from your data.
CSS Gradient Generator
Generate CSS linear-gradient code from two colors and an angle.
Color Palette Generator
Generate a harmonious color palette from one base color.
QR Code Generator
Generate a QR code from any text or URL, downloadable as PNG.
You Might Also Like
Popular tools from other categories
.htaccess Generator
Generate common .htaccess rules, force HTTPS, www redirect, and caching, with checkboxes.
API Key Generator
Generate random, secure API keys and tokens with an optional prefix. Cryptographically secure.
Bcrypt Hash Generator
Generate bcrypt password hashes in your browser with a configurable cost factor. Free online bcrypt tool.
CSRF Token Generator
Generate cryptographically secure random CSRF tokens for forms and APIs.
Can't Find the Right Calculator?
Try our AI Math Solver, type any problem in plain English and get instant step-by-step solutions.