Royal Conic Gradient CSS

Royal Conic is a royal violet depth gradient built with conic CSS syntax.

background

Gradient Field

Output

Copy-ready CSS

Pure CSS

background: conic-gradient(from 30deg at center, #1e1b4b 0%, #4f46e5 50%, #c084fc 100%);

Tailwind v4

bg-[conic-gradient(from_30deg_at_center\,_#1e1b4b_0%\,_#4f46e5_50%\,_#c084fc_100%)]

Try it in the generator

When to use it

Royal Conic is a indigo conic gradient preset for backgrounds, buttons, hero panels, cards, and visual accents. It uses 3 color stops (#1e1b4b, #4f46e5, #c084fc) to create a repeatable CSS background without image assets. Royal Conic is a royal violet depth gradient built with conic 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