CSS radial gradient generator
Choose a circle or ellipse, the size keyword, where the center sits and up to 6 color stops. The preview and the CSS update as you change anything.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Pick Circle or Ellipse and a size keyword.
- Move the center with the X and Y sliders.
- Set the colors and positions of the stops (2 to 6).
- Copy the rule.
What the output means
background: radial-gradient(circle farthest-corner at 50% 50%, #ffe259 0%, #ffa751 45%, #3a1c71 100%); draws a circle centered in the box, with yellow at the center, orange at 45% of the radius and dark purple at the farthest corner.
Example
A top-left glow: center X 0%, Y 0%, size Farthest corner, first stop a bright color at 0% and a dark one at 100%.
Tips
- Stops are sorted by position in the code, so the order of the rows does not matter.
- Layer several gradients in one background by separating them with commas in your own CSS.
- Check text contrast over the lightest and darkest parts of the gradient.
Frequently asked questions
What do the size keywords mean?
They say where the last color (100%) is reached. Farthest corner, the default, reaches the corner furthest from the center. Closest side stops at the nearest edge of the box. Closest corner and farthest side are the other two combinations.
What is the difference between circle and ellipse?
A circle keeps the same radius in every direction. An ellipse stretches with the box, so in a wide box it becomes wide. For a square box the two look the same.
How do I make a spotlight or glow?
Put a bright color at 0% and a transparent or dark color at 100%, and move the center to where the light should be. Use the percent sliders for the center.
Can I control the blend?
Choose OKLab or OKLCH to add "in oklab" or "in oklch" to the code. Transitions are then more even. Old browsers ignore the rule, so keep a plain fallback line.
How is this different from the general gradient generator?
The general tool writes a centered circle. This one also gives you the ellipse, the size keyword and the center position.