Candy Radial Gradient CSS

Candy Radial is a playful candy color gradient built with radial CSS syntax.

background

Gradient Field

Output

Copy-ready CSS

Pure CSS

background: radial-gradient(circle at center, #f9a8d4 0%, #a78bfa 50%, #67e8f9 100%);

Tailwind v4

bg-[radial-gradient(circle_at_center\,_#f9a8d4_0%\,_#a78bfa_50%\,_#67e8f9_100%)]

Try it in the generator

When to use it

Candy Radial is a pink radial gradient preset for backgrounds, buttons, hero panels, cards, and visual accents. It uses 3 color stops (#f9a8d4, #a78bfa, #67e8f9) to create a repeatable CSS background without image assets. Candy Radial is a playful candy color gradient built with radial CSS syntax. The preset is intentionally stored as a complete background declaration, which makes it easy to paste into a stylesheet, component style, or Tailwind arbitrary value. Use it when a flat fill needs more movement, or when you want a strong color system for a section. Open the generator to switch between linear, radial, and conic modes, adjust angle or center position, and move individual stops until the transition fits your layout.

Explore more