Violet Aura Box Shadow CSS

A violet aura with enough spread for feature cards.

box-shadow

Preview Surface

Output

Copy-ready CSS

Pure CSS

box-shadow: 0px 0px 26px -2px rgba(167, 139, 250, 0.58), 0px 26px 60px -30px rgba(109, 40, 217, 0.52);

Tailwind v4

shadow-[0px_0px_26px_-2px_rgb(167_139_250_/_0.58),_0px_26px_60px_-30px_rgb(109_40_217_/_0.52)]

Try it in the generator Open encoded state

When to use it

Violet Aura is a glow box-shadow preset built for luminous emphasis. It uses 2 shadow layers to create a violet effect that is easy to copy into product cards, dashboards, marketing blocks, and small interface surfaces. A violet aura with enough spread for feature cards. The shadow is intentionally described as plain CSS, so you can paste it into any framework or convert it into a Tailwind arbitrary value without changing the visual result. The effect stays on the outside edge, so it reads as lift rather than a pressed or recessed treatment. Use it when you want a repeatable starting point, then open it in the generator to adjust offset, blur, spread, color, opacity, or stacked layers for your own layout.

Explore more