Loading
Design CSS box shadows with live preview, multi-layer support, and copy.
Designbox-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
Adjust the horizontal and vertical offset sliders.
Set the blur radius and spread radius.
Choose a shadow color using the color picker.
Toggle inset shadow if you want an inner shadow effect.
Copy the generated CSS box-shadow declaration and paste it into your stylesheet.
Create subtle elevation shadows for card components in web UIs without trial-and-error in your code editor.
Design pressed or raised button effects using inset or outer shadows to give interactive elements a tactile feel.
Combine multiple box shadows (light and dark) to create the soft extruded neumorphism design style.
Generate glow-style box shadows for focus rings on form inputs to improve accessibility and visual feedback.
Box Shadow Generator gives you a visual drag-and-drop interface to design CSS box shadows and instantly copies the ready-to-paste CSS code.
Find and convert HEX, RGB, HSL color codes for your designs.
Build linear or radial CSS gradients with 2-5 color stops and copy the code.
Visually craft any rounded-corner shape with per-corner control.
Generate harmonious color palettes from a single base color.
Browse the full Tailwind color palette and click any swatch to copy.
Check image safe zones for TikTok, Reels, and Shorts to ensure content visibility.