# CSS Box Shadow Generator

Generate CSS box-shadow properties

> Canonical page: https://elysiatools.com/en/tools/box-shadow-generator

- **Category:** Design

- **Keywords:** css, box-shadow, shadow, generator, style

## Overview

The CSS Box Shadow Generator is a professional design tool that allows you to create and preview custom box-shadow properties for your web elements in real-time, ensuring precise control over depth and visual hierarchy.

## Inputs

- **Horizontal Offset (px)** (range)
- **Vertical Offset (px)** (range)
- **Blur Radius (px)** (range)
- **Spread Radius (px)** (range)
- **Shadow Color** (color): #000000
- **Opacity** (range)
- **Inset Shadow** (checkbox)

## When to use

- When you need to add depth to UI components like cards, buttons, or modals.
- When you want to experiment with shadow offsets, blur, and spread without writing manual CSS code.
- When you need to generate consistent shadow styles for a design system or web project.

## How it works

- Adjust the horizontal and vertical offset sliders to position the shadow relative to your element.
- Use the blur and spread radius controls to define the softness and size of the shadow effect.
- Select a shadow color and adjust the opacity to achieve the desired transparency level.
- Toggle the inset option to switch between an outer drop shadow and an inner shadow effect.

## Use cases

- Creating subtle elevation effects for modern card-based layouts.
- Designing custom button states with inset shadows for a 'pressed' look.
- Generating consistent shadow styles for responsive web design components.

## Frequently asked questions

### What is the difference between blur and spread?

Blur radius determines how fuzzy the shadow appears, while spread radius increases or decreases the actual size of the shadow shape.

### Can I create inner shadows?

Yes, simply check the 'Inset Shadow' box to apply the shadow inside the element's border.

### Does this tool provide the CSS code?

Yes, the tool generates the exact CSS box-shadow property string ready for you to copy and paste into your stylesheet.

### Can I adjust the shadow color transparency?

Yes, you can use the opacity slider to control the transparency of the selected shadow color.

### Are negative values supported for offsets?

Yes, you can use negative values for horizontal and vertical offsets to move the shadow to the top or left of the element.

## Related tools

- [CSS Animation Generator](https://elysiatools.com/en/tools/animation-generator): Generate CSS animation keyframes and properties
- [CSS Backdrop Filter Generator](https://elysiatools.com/en/tools/backdrop-filter-generator): Generate CSS backdrop-filter properties for glassmorphism effects
- [CSS Border Radius Generator](https://elysiatools.com/en/tools/border-radius-generator): Generate CSS border-radius properties
- [CSS Clip Path Generator](https://elysiatools.com/en/tools/clip-path-generator): Generate CSS clip-path properties for custom shapes
- [CSS Filter Generator](https://elysiatools.com/en/tools/css-filter-generator): Generate CSS filter properties
- [CSS Transform Generator](https://elysiatools.com/en/tools/transform-generator): Generate CSS transform properties
- [Color Gradient Generator](https://elysiatools.com/en/tools/color-gradient-generator): Generate smooth color gradients between multiple colors with customizable steps and formats
- [Color Shade Generator](https://elysiatools.com/en/tools/color-shade): Generate darker variations of a color by adding black, creating rich shades for depth and contrast in design

## Samples

- [CSS Viewer Samples](https://elysiatools.com/en/samples/css-viewer-samples): Sample CSS stylesheets (variables, flexbox/grid, animations) for the in-browser CSS Viewer
- [Bulma CSS Framework Samples](https://elysiatools.com/en/samples/bulma): Bulma CSS framework examples including columns, components, form controls, layout system, and modern CSS-based design patterns
- [CSS Selector Samples](https://elysiatools.com/en/samples/css-selectors): Collection of CSS selector examples for extraction and analysis testing
- [Milligram CSS Framework Samples](https://elysiatools.com/en/samples/milligram): Milligram CSS framework examples including typography, forms, grids, and components

## Related content

- [Color System and CSS Effect Design Workflow](https://elysiatools.com/en/hubs/design-generate): Extract a palette, build accessible color relationships, generate tokens, and apply CSS effects that stay consistent in real interface states.