Box Shadow Generator

What is a box shadow generator?

The CSS box-shadow property draws a shadow around an element such as a card, button or image. Shadows give a flat page a sense of depth and help people see which parts can be clicked or which panel sits on top. The property has several numbers that interact with each other, so it is much easier to tune by eye. This generator gives you sliders for every setting, a live preview box and code you can copy straight into your project.

How to create a box shadow

1. Start from a preset such as Soft drop or Smooth layered, or adjust the default shadow.
2. Move the horizontal and vertical offset sliders to set where the light comes from.
3. Increase blur for a softer edge and use spread to grow or shrink the shadow.
4. Pick a shadow colour and set its opacity. Tick Inset for an inner shadow.
5. Press Add layer to stack another shadow, and switch between layers with the Layer buttons.
6. Press Copy CSS.

Settings explained

• Horizontal and vertical offset move the shadow right, left, down or up in pixels.
• Blur softens the edge. Zero gives a hard shadow.
• Spread makes the shadow larger or, with negative values, smaller than the box.
• Colour and opacity are combined into an rgba value.
• Inset draws the shadow inside the element, as if it were pressed in.
• Layers: up to eight shadows separated by commas, drawn front to back.
• Preview controls for box colour, page background and corner radius, so you can match your design.

Why layered shadows look better

Real shadows are not a single blurry shape. Close to an object the shadow is dark and sharp, and further away it becomes lighter and softer. Stacking several shadows with growing offset and blur, each at low opacity, imitates this effect. The Smooth layered preset is a good example of this technique and works well for cards and popups.

Tips

Keep shadows subtle on most interface elements and save stronger ones for things that float above the page, like menus and dialogs. Use the same light direction across your site so shadows feel consistent. Tinting the shadow with a dark version of your brand colour instead of pure black often looks more natural on coloured backgrounds.

Shadows on phones and tablets

Large blurry shadows can look heavy on small screens, where elements sit close together. Preview your shadow on this page using your phone, or narrow your browser window, to see how it feels. A slightly smaller offset and blur often works better for mobile layouts, and you can set it in a media query.