Free · Fast · Privacy-first

Radial Gradient CSS Generator

Radial gradients radiate outward from a central point, making them ideal for spotlight effects, soft glows, vignettes, and circular colour transitions that linear gradients cannot achieve.

⚡

Choose circle or ellipse shape

🔒

Set gradient centre position (x/y)

✨

Adjust colour stops and transition smoothness

⚡

Generates browser-compatible CSS output

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Gradient to your website

Drop the Gradient into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/gradient?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Gradient by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/gradient?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Gradient by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

CSS Radial Gradients: Shape, Position, and Focal Point Control

A radial gradient radiates from a centre point outward in concentric rings. The syntax gives you control over three main aspects: the shape (circle or ellipse), the ending shape size (closest-side, farthest-corner, and two other keywords), and the centre position using the "at" keyword. The default is an ellipse that stretches to the farthest corner of the element. By specifying circle, you force a perfectly round gradient regardless of element dimensions. The centre position defaults to the element centre but can be moved to any x/y coordinate using percentages, pixels, or keywords. Adjusting the centre position moves the focal point away from the middle, enabling off-centre spotlight effects, asymmetric glows, and light-source simulations that add real visual depth to backgrounds and decorative elements.

The colour stops in a radial gradient work identically to those in linear gradients. Each stop has a colour and an optional position. The innermost stop at 0% is the gradient origin, and the outermost stop at 100% falls at the ending shape boundary. Four size keywords control where that boundary falls: farthest-corner (the default) extends the ending shape to the farthest corner of the element; closest-side stops the gradient at the nearest edge, creating a tighter and more concentrated effect; farthest-side extends to the farthest edge; closest-corner extends to the nearest corner. Choosing between these keywords significantly changes how the gradient fills the element, especially on non-square containers. All modern browsers support the full radial-gradient syntax without vendor prefixes.

FixTools generates the radial-gradient() declaration with your chosen shape, position, and colour stops assembled in the correct argument order. Copy the output and apply it directly as background or background-image on any element. The generated CSS is standard syntax that requires no modification before use in any browser or framework environment.

Mobile and responsive considerations deserve specific attention with radial gradients because they behave very differently on tall narrow viewports than on wide desktop ones. The default ellipse shape stretches to match the element aspect ratio, so a gradient that looks like a balanced soft glow on a wide desktop hero becomes a tall narrow oval on a portrait phone, which can read as visually awkward or unintentional. The circle keyword fixes the shape but then the closest-side and closest-corner size keywords change behaviour as the viewport rotates between portrait and landscape orientations. The most reliable strategy for responsive radial gradients is to use circle with closest-side or a specific pixel size, set a fixed background-size, and centre the gradient with a stable focal point. Testing on real devices at multiple viewport widths catches the asymmetric behaviours that DevTools responsive emulation can miss, particularly on tall foldable phone screens.

MDN radial-gradient() reference W3C CSS Images Level 4 specification

How to use this tool

💡

Configure your radial gradient settings. Example output: background: radial-gradient(circle at center, #f093fb 0%, #f5576c 50%, #4facfe 100%)

How It Works

Step-by-step guide to radial gradient css generator:

1
Open the gradient tool
Click "Open CSS Gradient Generator" to launch the visual editor. Once it loads, find the gradient type selector and choose Radial Gradient. The preview and controls will switch to radial mode, showing shape and position controls that are specific to the radial-gradient() function.
2
Choose shape
Select circle to produce a perfectly round gradient that maintains its circular shape regardless of the element's width and height. Select ellipse (the default) to allow the gradient to stretch proportionally to fit the element dimensions, producing an oval that fills the element more naturally on non-square containers.
3
Set the centre position
Set the x and y coordinates of the gradient focal point using the position controls. The default is center center (50% 50%). Move the focal point toward a corner or edge to create off-centre spotlights, asymmetric glows, and light-source effects. You can use percentages for proportional positioning or pixel values for precise placement.
4
Add colour stops
Set the innermost colour stop first at 0% and the outermost stop last at 100%. Add intermediate stops for multi-colour radial effects. The first stop represents the colour at the gradient's focal centre and each subsequent stop defines the colour at its percentage radius from the centre point.
5
Copy CSS output
Click the copy button on the output panel to copy the complete background: radial-gradient(...) declaration to your clipboard. Paste it directly into your stylesheet or component styles. The output is ready to use without modification.

Real-world examples

Common situations where this approach makes a real difference:

Spotlight effect on a dark background

A developer wants a dark hero section with a subtle light spotlight that suggests depth and draws the eye toward the centre of the layout. They generate a radial gradient using circle at 50% 40%, starting from a semi-transparent pale colour at the centre and fading to the dark background colour at the outer stop. Applied as background-image layered over a solid dark background-color on the hero section, the effect mimics stage lighting without any image assets and loads with zero HTTP requests at any screen resolution.

Soft glow behind an icon or badge

A UI designer wants a soft coloured glow behind a product icon to make it stand out on an otherwise flat white card. They generate a small radial circle gradient from a pale, lightly tinted version of the icon colour at 0% to fully transparent at 70%. They set background-size on the icon container to match the glow dimensions and centre it behind the icon using background-position. The result is a lightweight glow that reinforces the icon visually without requiring any raster image, SVG filter, or box-shadow workaround.

Vignette overlay on a photo

A content website needs a subtle vignette effect on featured images to direct the viewer's eye toward the centre of each photo. A developer creates a pseudo-element positioned absolutely over each image and applies a radial-gradient overlay: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%). The overlay darkens only the image edges while leaving the central subject fully visible, producing a cinematic framing effect with a single CSS declaration and no image manipulation required.

Loading spinner colour fill

A developer creates a custom circular loading indicator and wants it to have a radial gradient fill that emanates from the centre rather than a flat colour. They generate a circle radial gradient from a vivid inner colour at 0% to a deeper outer shade at 100%, apply it as the background of the spinner element, and combine it with a CSS clip-path: circle() to produce a perfectly round spinner with a glowing centre. The gradient adds visual depth to the indicator and makes the loading state feel more intentional and designed.

Pro tips

Get better results with these expert suggestions:

Use "closest-side" for a tighter spotlight

The default size keyword "farthest-corner" extends the gradient ending shape to the farthest corner of the element, which can make the gradient look diluted or washed out on wide rectangular containers because the colour transitions too gradually. Switching to "closest-side" confines the gradient ending shape to the nearest edge of the element, creating a more concentrated and dramatic glow or spotlight effect. This keyword is especially useful for wide hero banners and landscape-oriented cards where the default size spreads the gradient too thin.

Stack radial gradients for multi-light effects

Multiple radial gradients can be layered as comma-separated background values. Position each gradient at a different x/y coordinate using the "at" keyword and assign each a different colour. The first gradient in the list renders on top. This technique simulates multiple light sources illuminating a single background element from different directions and positions. It creates rich, organic-looking colour fields that are widely used in modern glassmorphism, mesh gradient, and aurora-style UI designs.

Offset the centre for asymmetric depth

A radial gradient centred at 50% 50% produces a symmetric pattern that can look flat on large backgrounds. Moving the focal point toward a corner, such as "at 20% 80%", creates an asymmetric glow that implies a light source positioned off to one side. The contrast between the brighter focal area and the darker extremity adds perceived depth to the background. This technique pairs well with hero sections where the main content is positioned on the side opposite the focal point.

Use background-size to control gradient scale

Setting background-size on an element with a radial gradient lets you scale the gradient independently of the element dimensions. For example, background-size: 80% 80% with background-position: center concentrates the gradient into the central 80% of the element, leaving the outer edges at the colour of the last stop. This creates a contained glow or spotlight effect without adjusting the gradient function itself, and it can be easily animated by transitioning background-size for an expanding or pulsing glow animation.

FAQ

Frequently asked questions

The circle keyword produces a perfectly round gradient shape that stays circular regardless of the element's dimensions. ellipse (the default) stretches the gradient shape to match the element's aspect ratio, producing an oval. On a square element, circle and ellipse produce visually identical results. On a wide rectangular element, ellipse produces a wide oval that fills the element proportionally, while circle produces a round shape that may leave corners outside the gradient ending shape. Use circle when you need a consistent round spotlight; use ellipse when you want the gradient to fill the element naturally.

Use the "at" keyword followed by x and y position values inside the radial-gradient function: radial-gradient(circle at 30% 70%, red, blue). This places the gradient centre at 30% from the left and 70% from the top of the element. You can use percentage values for proportional positioning, pixel values for absolute positioning, or keywords such as top, center, bottom, left, and right. You can also place the focal point outside the element bounds by using values like "at -10% 50%", which creates an off-canvas gradient origin for a partial glow effect at one edge.

Yes. Create a radial gradient that starts with a bright or light colour at the centre and fades to transparent at the outer edge: radial-gradient(circle at center, rgba(255, 255, 100, 0.8) 0%, transparent 60%). Apply it as background-image on an absolutely positioned element placed over your content with pointer-events: none, or directly as the background on the element itself. Adjust the outer stop percentage to control how far the glow extends from the centre. For a stronger glow, move the outer stop from 60% to 80%. For a tighter, more concentrated glow, move it inward to 40%.

There are four size keywords that control the ending shape of a radial gradient. closest-side stops the gradient at whichever side of the element is closest to the focal point, creating a tight gradient on off-centre focal positions. closest-corner extends the gradient to the nearest corner of the element. farthest-side extends to the farthest side from the focal point. farthest-corner (the default) extends to the farthest corner, which ensures the gradient covers the entire element background. The choice of size keyword significantly affects how concentrated or spread out the gradient appears, especially when the focal point is not centred.

Use comma-separated background values to stack the gradient on top of the image: background: radial-gradient(circle at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%), url(image.jpg). The gradient is listed first so it renders above the image. The transparent centre of the gradient leaves the image visible in the focal area, while the darkened outer stop creates a vignette effect around the edges. Combine with background-size: cover and background-position: center on the image layer to ensure it fills the element correctly at all viewport sizes.

Direct CSS animation of radial gradient colour stops is not supported because the gradient value is not treated as an interpolatable type by the CSS transition engine. The background-position technique works for radial gradients: set background-size larger than the element, then animate background-position with @keyframes to shift the visible region of the oversized gradient, simulating movement. For true animated colour transitions inside a radial gradient, use the CSS @property rule to register a custom colour variable as an animatable type and reference that variable inside the radial-gradient function. This technique is supported in Chrome, Edge, and Safari.

Yes. The CSS border-radius property clips the element's visible area, and the radial gradient fills the background behind that clip. A circular element created with border-radius: 50% combined with a radial circle gradient centred at the middle produces a round disc with a smooth colour transition from centre to edge, which is a common technique for icon backgrounds, avatar rings, and coloured badge elements. The gradient itself is not affected by border-radius; only the visible area of the element is clipped to the rounded shape.

Use repeating-radial-gradient() instead of radial-gradient(). Define a short colour pattern spanning only a small distance, and the browser tiles the pattern in concentric rings outward from the focal point. For example: repeating-radial-gradient(circle, #667eea 0px, #667eea 10px, #764ba2 10px, #764ba2 20px) produces alternating solid-colour concentric rings across the entire element. Adjust the pixel values to change ring width. This technique creates CSS-only target patterns, ripple effects, and radial stripe designs without any image assets or JavaScript.

This is the default ellipse behaviour: the gradient shape stretches to match the element's aspect ratio, so a wide hero on desktop produces a wide oval while a tall hero on mobile produces a tall oval. Switch from ellipse to circle to lock the shape: background: radial-gradient(circle at center, #667eea, #764ba2). The circle keyword keeps the gradient perfectly round regardless of viewport. If you also need a consistent size across breakpoints, pair circle with closest-side or an explicit pixel radius: radial-gradient(circle 400px at center, ...). The combination of circle plus a fixed radius produces visually identical gradients on every screen size from a 320px mobile portrait viewport up to a 4K desktop monitor.

For glows that need to extend outside the element's box, box-shadow is usually simpler because it draws naturally outside the element bounds without any positioning work. For glows confined within the element or for effects that need precise focal positioning, radial-gradient is more controllable. The two approaches differ in performance characteristics: large blurred box-shadow values can trigger expensive blur-buffer compositing on lower-end devices, while radial gradients are GPU-rasterised once and cached. For animated glows, a gradient driven by background-position is generally more efficient than animating box-shadow blur or spread, which can force per-frame re-rasterisation in some browsers and create noticeable jank on weaker hardware.