Create CSS Radial Gradient
Radial gradients emanate outward from a center point in a circular or elliptical pattern. They are perfect for spotlight effects, glowing buttons, background orbs, and creating depth in UI design. The visual editor lets you position the center and control the spread.
Open CSS Gradient Generator →How to Create CSS Radial Gradient
- Open the CSS Gradient Generator on ToolPrime
- Select "Radial" as the gradient type
- Choose colors and adjust the center position
- Toggle between circle and ellipse shapes
- Copy the CSS radial-gradient code
Common Use Cases
- Create spotlight or glow effects behind elements
- Design circular gradient backgrounds for avatars
- Build depth effects for card hover states
- Generate radial overlays for image backgrounds
Frequently Asked Questions
What is the difference between circle and ellipse shapes?▾
Circle gradients are perfectly round regardless of the element dimensions. Ellipse gradients stretch to fit the element shape.
Can I move the center point?▾
Yes, use the position controls to place the gradient center anywhere. Common values include "center", "top left", or specific percentages.