CSS Box Shadow Generator
Create complex CSS box shadows with a visual builder. Control X/Y offset, blur radius, spread radius, color, opacity, and inset for each shadow layer. Add multiple shadow layers and copy the ready-to-use CSS.
Loading tool...Loading tool...
Common Use Cases
- Design card shadows for UI components
- Create layered depth effects
- Build Material Design elevation shadows
- Generate CSS for Tailwind shadow plugin
Frequently Asked Questions
What is the difference between box-shadow and drop-shadow?
box-shadow applies to the element's rectangular box (ignoring transparency). drop-shadow() CSS filter applies to the actual rendered shape including transparent areas, so it works correctly on PNGs and irregular shapes.
Related Tools
Color ConverterConvert colors between HEX, RGB, HSL, HSV, and CMYK formats with a visual picker.CSS Unit ConverterConvert between px, rem, em, vh, vw, pt, cm, and all CSS length units.Slug GeneratorConvert titles and text to URL-safe slugs. Handles unicode, special characters, and custom separators.
Tool Info
CategorygenerationAI EnhancementNoData StorageZero retention