build CSS box shadows visually. adjust offset, blur, spread, color, and inset. stack up to 4 shadows.
box-shadow: 5px 5px 10px 0px #00000040;
Box Shadow Generator lets you design CSS box shadows visually with a live preview. Adjust horizontal and vertical offset, blur radius, spread, and color. Stack up to 4 shadows for complex depth effects.
See the shadow update in real time as you drag sliders. Toggle inset mode for inner shadows, adjust opacity for subtle effects, and combine multiple shadow layers for realistic depth.
Copy the complete CSS box-shadow property with one click. No more trial-and-error in your browser's dev tools.
Adjust shadow properties
Use the sliders to set horizontal offset, vertical offset, blur radius, spread, and color.
Add more shadows
Click to add additional shadow layers (up to 4) for complex, layered depth effects.
Toggle inset
Switch to inset mode for inner shadows that appear inside the element.
Copy the CSS
Copy the generated box-shadow CSS property to paste into your stylesheet.
Card designs
Add depth to card components with subtle, multi-layered shadows.
Button hover effects
Design shadow changes for button hover and active states.
Modal overlays
Create deep shadows for modal windows and floating panels.
Navigation menus
Add drop shadows to sticky navigation bars and dropdown menus.
Input focus states
Design colored shadow rings for focused form inputs and buttons.
PDF utilities, image tools, developer helpers — all free, no signup.
Add text or logo watermarks to photos with custom position, opacity, and tiling.
Live regex tester and debugger.
Convert text between UPPERCASE, lowercase, Title Case, camelCase, snake_case, kebab-case, and more.
Resize photos to exact dimensions with aspect ratio lock.
Compare two texts side by side with line-by-line diff highlighting.
Generate SEO meta tags, Open Graph, and Twitter Card HTML.