Radial Gradient Generator
Build CSS radial gradients visually with specialized controls for shape (circle/ellipse), size (farthest-corner, closest-side, etc.), and centre position. Add up to 10 colour stops with live preview on light, dark, or checkerboard backgrounds. Copy the production-ready CSS with one click. Fully private, 100% free, and no signup required.
Preview Background
Radial Presets
Center Position
Color Stops (2)
Click the colour swatch to open the colour picker. Drag slider to adjust position.
background: radial-gradient(ellipse farthest-corner at 50% 50%, #6366f1 0%, #ec4899 100%);
Why Use Our Radial Gradient Generator?
Dedicated Radial Gradient Builder
Unlike general gradient tools, this Radial Gradient Generator focuses entirely on radial gradients with specialized controls for shape (circle/ellipse), size (farthest-corner, closest-side, etc.), and precise centre position (X/Y sliders). Every parameter updates the preview in real time.
Multi-Background Preview
Preview your radial gradient on light, dark, or checkerboard backgrounds to see how it renders in different contexts. A centre-point marker shows exactly where the gradient radiates from, and the stop preview bar gives you a linear view of all colour stops.
100% Private - No Upload
All gradient generation and CSS output is processed locally in your browser. Your colour values never leave your device and are never sent to any server.
Free & Unlimited Gradients
Generate unlimited radial gradients with no signup, no subscription, and no usage caps. The Radial Gradient Generator is completely free forever with no ads blocking the interface.
Common Use Cases for Radial Gradient Generator
CSS Background Effects
Web developers use the Radial Gradient Generator to create background effects like spotlight illumination, sunburst overlays, and vignette shadows. The generated CSS works in all modern browsers with no vendor prefixes, ready to paste directly into stylesheets.
UI Component Design
UI designers use radial gradients for button highlights, card overlays, modal backdrop effects, and avatar backgrounds. The circle shape option is perfect for creating consistent, scalable gradient effects that work at any size.
Photography & Image Overlays
Photographers and image editors use radial gradients as overlay effects - vignette darkening around photo edges, spotlight effects highlighting a subject, or colour washes that add atmosphere to images.
Mobile App Launch Screens
App designers use the Radial Gradient Generator to create launch screen backgrounds and onboarding illustrations. The repeating mode creates interesting pattern effects that add visual depth without increasing app bundle size.
Brand Identity Elements
Brand designers use radial gradients in logo marks, brand pattern backgrounds, and social media templates. The multi-stop support allows for complex brand colour transitions that feel rich and premium.
Lighting & Atmosphere Simulation
Designers use radial gradients to simulate lighting effects - sunlight streaming through windows, stage spotlight effects, glowing UI elements, and atmospheric fog or mist. The centre position controls make it easy to place the light source precisely.
Understanding Radial Gradients
What is a Radial Gradient?
A radial gradient is a CSS gradient that transitions colours outward from a centre point in a circular or elliptical shape. Unlike linear gradients that follow a straight line, radial gradients expand in all directions from the origin, creating effects like spotlights, sunbursts, vignettes, and glowing elements. The radial gradient CSS function allows you to control the shape (circle or ellipse), size (how far the gradient extends), and exact centre position.
How Our Radial Gradient Generator Works
- Configure radial options:Choose between Circle (perfectly round, symmetric in all directions) or Ellipse (oval shape, stretches to match the element's aspect ratio). Select the size - Farthest-Corner extends the gradient to the furthest corner, Closest-Side stops at the nearest edge. Use the X/Y sliders to set the exact centre position.
- Add colour stops: Use the colour picker or hex input to define each colour in the gradient. Drag the position slider to place each stop precisely. Add up to 10 colour stops and enable repeating mode for striped circular patterns.
- Preview and copy:See the gradient update instantly on light, dark, or checkerboard backgrounds. A centre-point marker shows the gradient origin. Click “Copy CSS” to copy the production-ready CSS declaration.
Radial Gradient Parameters Explained
- Shape (circle vs. ellipse):Circle creates a perfectly round gradient that looks the same in all directions - ideal for spotlight effects and call-to-action buttons. Ellipse stretches to fill the element's container shape - it matches the aspect ratio of the element, making it perfect for full-page backgrounds and wide banners.
- Size keywords: Farthest-Corner (default) extends to the furthest corner from the centre. Closest-Corner stops at the nearest corner. Farthest-Side and Closest-Side use the nearest or furthest edge. The choice determines how much of the element the gradient covers and how soft or sharp the edge appears.
- Centre position: Default is 50% 50% (dead centre). Moving the centre creates asymmetric gradients - placing it at 50% 0% simulates overhead lighting, while 100% 100% creates a corner spotlight effect. The centre marker on the preview helps visualise placement.
- Repeating mode: Toggle repeating-radial-gradient() to create concentric ring patterns - like a target, ripples in water, or sound wave visualisations. The pattern repeats based on your colour stop positions.
Browser Support & Performance
Wide browser support: The CSS radial-gradient() function is supported in all modern browsers - Chrome 26+, Firefox 16+, Safari 6.1+, and Edge 12+. No vendor prefixes are needed. The repeating-radial-gradient() variant has the same broad support.
Performance: CSS gradients are rendered by the GPU and are highly performant - they do not require any image downloads, memory for image decoding, or additional HTTP requests. Using the Radial Gradient Generator to create CSS-based gradients instead of image files reduces page load time and bandwidth usage significantly.
Related Color Tools
Color Gradient Generator
Build linear, radial, and conic CSS gradients visually with up to 10 colour stops, direction/angle controls, and copy-CSS output.
Multi-Stop Gradient Generator
Create complex gradients with 3-15+ colour stops. Drag to reposition stops, copy CSS, or download as image.
Conic Gradient Generator
Specialized conic gradient builder. Set start angle, position, and multiple colour stops. Preview as pie chart.
Gradient Background Library
Curated gallery of 110+ CSS gradient backgrounds. Browse by style and copy the CSS with one click.
Frequently Asked Questions About Radial Gradient Generator
A Radial Gradient Generator is a visual tool that lets you create CSS radial-gradient() effects without writing code. You configure the shape (circle or ellipse), size (how far the gradient extends), centre position (X/Y coordinates), and colour stops. The tool generates the production-ready CSS for you to copy and use in your projects.
Circle creates a perfectly round gradient that is symmetric in all directions - the gradient looks the same no matter the element's aspect ratio. Ellipse stretches to match the element's container shape, creating an oval gradient. Ellipse is the default because it adapts to different element dimensions, while circle is preferred for button effects and spotlight highlights.
The size controls how far the gradient extends from the centre point. Farthest-Corner (default) reaches the furthest corner. Closest-Corner stops at the nearest corner. Farthest-Side reaches the furthest edge. Closest-Side stops at the nearest edge. Farthest-Corner creates the softest, most gradual transition, while Closest-Side creates a tighter gradient with a sharper edge.
Yes. The CSS generated by the Radial Gradient Generator uses the standard radial-gradient() function, supported in all modern browsers without vendor prefixes. Simply copy the CSS and paste it into your stylesheet. The gradient is pure CSS - no images, no JavaScript, no external dependencies.
When you enable the repeating toggle, the tool uses repeating-radial-gradient() instead of radial-gradient(). This creates concentric ring patterns that repeat based on your colour stop positions. For example, with colour stops at 0% and 20%, the pattern repeats every 20%, creating a target-like effect. This is perfect for ripple effects, sound wave visualisations, and geometric backgrounds.
Yes. Use the Center X and Center Y sliders to position the gradient origin anywhere within the element. 50% 50% is dead centre. 0% 0% places the origin at the top-left corner. 100% 100% places it at the bottom-right corner. The preview shows a marker at the centre point, and the gradient updates in real time as you adjust the sliders.
Colour stops define the colours in your gradient and where they appear. Each stop has a colour (hex value) and position (0%-100%). The gradient smoothly transitions between stops. You can add up to 10 stops by clicking "Add Stop". Drag the position slider to place each colour. Remove stops with the trash button - you need at least 2 stops for a valid gradient.
Yes. The Radial Gradient Generator is 100% free with no signup required, no premium features, and no usage limits. Generate unlimited gradients without any restrictions or hidden costs. There are no ads blocking the interface, and the tool works entirely in your browser without any server communication.