Adjust blur, spread, offset and color with a live preview — copy the ready-to-use CSS code instantly.
Also style elements with our Border Radius Generator or convert colors with the Color Converter.
🔒 All generation runs locally in your browser — nothing is stored or uploaded.
box-shadow property updates live. Click Copy CSS to grab it for your stylesheet.The CSS box-shadow property adds shadow effects to elements. The syntax is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. This CSS box shadow generator works as a shadow CSS tool, drop shadow generator, and CSS elevation tool for front-end developers and UI designers who need precise shadow values without trial-and-error in code.
Front-end developers use box shadows to communicate elevation and depth in UI components — cards, modals, buttons, and dropdowns all benefit from carefully chosen shadows. A card at "elevation 2" in Material Design, for example, uses a specific combination of offset, blur, and opacity to produce a subtle shadow that implies the card sits just above the background. Getting these values right manually requires many iterations; a live visual generator removes that friction entirely.
UI designers transitioning from Figma or Sketch to CSS often find that their design tool shadow values don't map directly to CSS syntax. Figma separates X offset, Y offset, blur, and spread — exactly how this tool's sliders are arranged — making it straightforward to translate a Figma shadow directly into a CSS value. The opacity slider generates an rgba() color value automatically, which is the correct approach for shadows that need to look good on both light and dark backgrounds.
The inset shadow option creates an inner glow or recessed effect — popular in neumorphic design, input field focus states, and pressed button states. Inset shadows appear inside the element's border rather than outside, which creates a completely different visual effect from the same offset and blur values. Being able to toggle between outer and inset instantly in a live preview makes design decisions much faster than editing CSS values by hand.