CSS Shadow Generator
Generate box-shadow and text-shadow CSS with a live preview.
Shadow Text
About CSS Shadow Generator
Build perfect CSS shadows visually. Adjust horizontal/vertical offset, blur radius, spread radius, shadow color, and opacity. Toggle inset for inner shadows. See a live preview and copy the ready-to-use CSS property.
Use Cases
Designing card shadows for UI components, creating text-shadow effects for headings, building depth and elevation in design systems, generating consistent shadow tokens for Tailwind/CSS variables.
How It Works
Composes the CSS box-shadow value string from your inputs: h-offset, v-offset, blur, spread, and color (with alpha). Updates the preview element in real time so you see exactly how the shadow will render.
Frequently Asked Questions
What is box-shadow vs text-shadow?
box-shadow applies to the element box (cards, buttons, divs). text-shadow applies only to text characters. Both support offset, blur, and color.
What does inset do?
Inset flips the shadow to the inside of the element — creating a pressed-in or concave look instead of a floating shadow.
Can I add multiple shadows?
The generator creates one shadow. For multiple shadows, copy the CSS value and add more comma-separated values manually (e.g. box-shadow: 0 2px 4px #000, 0 8px 24px #fff).