Box Shadow Generator
Generate CSS shadows visually
CSS Box Shadow Generator - Build Shadows Visually
The anatomy of box-shadow in CSS
Box-shadow takes four to six values: offset-x, offset-y, blur-radius, spread-radius, a color, and optionally the inset keyword for an inner shadow. For example, box-shadow: 5px 10px 15px 0 rgba(0,0,0,0.3). The offsets determine the light direction, with negative values placing the light below or to the right. Blur creates the natural softening. Spread expands or contracts the shadow without blurring it. A color with transparency through rgba or hsla makes the result look realistic. You can combine several shadows separated by commas for layered effects.
Shadow techniques for modern design
Current shadow trends include soft UI or neumorphism, which uses subtle light and dark shadows for a 3D feel; elevation shadows from Material Design, which signal hierarchy with growing blur, roughly 8 px for cards, 16 px for modals and 24 px for drawers; colored shadows that borrow the element color for a neon glow; long shadows, solid and extended diagonally; and multiple shadows combining a distant blurred one with a close sharp one for realism. This tool lets you experiment with all of those visually.
Performance and alternatives to box-shadow
Box-shadow can affect performance, especially with a large blur, a big spread, or many shadowed elements on one page. For best results, set will-change: transform when you animate the element; consider filter: drop-shadow() for non-rectangular shapes, since it respects PNG and SVG transparency; and for large static shadows a prerendered image can be cheaper. On mobile, reduce shadow complexity. The Performance panel in Chrome DevTools will tell you whether shadows are causing expensive repaints.
If you work with this tool, you will probably also find these useful Color Converter, PX to REM Converter, Gradient Generator, Flexbox Generator.
Frequently asked questions
What is the difference between box-shadow and drop-shadow?
box-shadow applies the shadow to the element box, its rectangular bounding area. filter: drop-shadow() follows the actual silhouette including transparency, which is what you want for PNGs with a transparent background or for SVGs. drop-shadow supports neither spread nor inset, but it respects complex shapes.
How do I create a shadow on one side only?
Use the offset to aim it and a negative spread to contain it. A bottom-only shadow looks like box-shadow: 0 10px 15px -10px rgba(0,0,0,0.3), where the negative spread matching the offset cancels the lateral expansion. Adjust the blur to taste.
Can I use CSS variables with box-shadow?
Yes, and it is the recommended approach for consistency. Define --shadow-sm: 0 1px 2px rgba(0,0,0,0.1), --shadow-md: 0 4px 6px rgba(0,0,0,0.1) and --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), then apply them with box-shadow: var(--shadow-md). Frameworks such as Tailwind ship a predefined shadow scale on the same principle.
How do I make colored shadows that match the element?
Use the element color with transparency in the shadow. For a blue button (#3B82F6) try box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4), which produces a glow that feels cohesive. To automate it, Sass can manipulate colors with transparentize(), and modern browsers support CSS color-mix() for the same effect.