CSS Forge
Back to generator

Peacock Conic Gradient CSS

Peacock Conic is a peacock-toned richness gradient built with conic CSS syntax.

background

Gradient Field

Output

Copy-ready CSS

Pure CSS

background: conic-gradient(from 30deg at center, #0f766e 0%, #2563eb 50%, #7c3aed 100%);

Tailwind v4

bg-[conic-gradient(from_30deg_at_center\,_#0f766e_0%\,_#2563eb_50%\,_#7c3aed_100%)]
Try it in the generator

When to use it

Peacock Conic is a teal conic gradient preset for backgrounds, buttons, hero panels, cards, and visual accents. It uses 3 color stops (#0f766e, #2563eb, #7c3aed) to create a repeatable CSS background without image assets. Peacock Conic is a peacock-toned richness 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.

Hexpedia

Color reference

Review the gradient stop colors used by Peacock Conic in Hexpedia.

#0f766e#2563eb#7c3aed

Explore more

More CSS Forge paths

Gradient galleryBox Shadow generatorClip Path generator

Related

Similar gradients

These presets share color and mode tags with Peacock Conic.