Visual editor for CSS radial gradients. Pick circle or ellipse shape, set center position (top-left, center, custom %), and adjust color stops radiating outward. Copy clean CSS ready to use.
When to use this
Use for: spotlight effects on hero images, button glow effects, card highlight backgrounds, mimicking sphere / orb shading, creating dramatic background centers.
Frequently Asked Questions
What's the difference between circle and ellipse?
Circle: gradient radiates in a perfect circle (radius equal in all directions). Ellipse: radiates in an oval (radius can differ horizontally vs vertically). Use circle for symmetric glows; use ellipse when the container is non-square and you want the gradient to match.
Powered by CSS Gradient Generator.