Understanding the CSS Box Shadow Property
The box-shadow property in CSS allows web designers and front-end developers to cast a shadow from the frame of an element. This property is a core tool for establishing visual hierarchy, defining depth, and indicating interactivity on a webpage.
A standard CSS box shadow is defined by its horizontal and vertical offsets, a blur radius, a spread radius, and a color value. By manipulating these values, you can alter how users perceive the elevation and texture of an element. The Box Shadow Generator provides a visual interface to adjust these parameters in real-time, outputting clean, ready-to-use CSS code.
The Role of Offset, Blur, and Spread
To design effective shadows, it is essential to understand how the physical properties of light are simulated through CSS parameters:
- Horizontal offset: Controlled by a slider ranging from -50px to 50px. This parameter moves the shadow left or right. A positive value shifts the shadow to the right, while a negative value shifts it to the left.
- Vertical offset: Controlled by a slider ranging from -50px to 50px. This parameter moves the shadow up or down. A positive value pushes the shadow downward, while a negative value pulls it upward.
- Blur: Ranging from 0px to 100px, this slider softens the edges of the shadow. A value of 0px produces a sharp, hard edge, whereas higher values distribute the shadow color over a wider, more diffused area.
- Spread: Ranging from -50px to 50px, this slider grows or shrinks the shadow before the blur is applied. Positive values expand the shadow outward in all directions, while negative values pull the shadow inward, shrinking its overall footprint.
Normal Shadows vs. Inset Shadows
By default, a box shadow is cast outside the boundaries of the element, making the element appear raised above the background. However, toggling the Inset shadow option changes this behavior entirely.
An inset shadow flips the shadow so that it is rendered inside the element's border. Instead of making the element look like it is floating above the page, an inset shadow makes the element appear recessed or sunken into the page. This is highly effective for designing form inputs, search bars, or buttons that look physically pressed down.
Creating Depth with Multiple Shadow Layers
In real-world physics, light sources rarely produce a single, uniform shadow. Instead, objects cast complex shadows consisting of a dark, sharp core (umbra) and a softer, lighter outer region (penumbra).
A single CSS shadow layer often looks flat and artificial when stretched over a large area. To achieve realistic depth, designers stack multiple shadow layers.
The Box Shadow Generator pre-renders five layers to help you build this complexity. The first layer starts with default values of 0 8 24 -4 and an 18% transparent black color, while the other four layers are initially hidden. You can activate and configure these additional layers by clicking Add layer, or clean up your stack using Remove layer.
By combining a tight, dark shadow (low blur, negative spread) with a soft, wide shadow (high blur, positive or neutral spread), you can replicate natural light behavior and create highly polished, realistic designs.
Generator Interface and Controls
The tool provides direct control over every aspect of your shadow stack. The interface is organized into clear, functional controls that update the output instantly:
| Control Label | Type | Range / Action |
|---|---|---|
| Horizontal offset | Slider | -50px to 50px |
| Vertical offset | Slider | -50px to 50px |
| Blur | Slider | 0px to 100px |
| Spread | Slider | -50px to 50px |
| Shadow color | Color Picker | Selects shadow color |
| Opacity | Slider | Adjusts transparency |
| Inset shadow | Toggle | Switches between outer and inner shadow |
| Add layer | Button | Creates a new shadow layer with default values |
| Remove layer | Button | Deletes the selected shadow layer |
When multiple layers are active, the generator compiles them into a single CSS rule, listing the layers as comma-separated values under the CSS heading. You can copy this code directly to your clipboard using the Copy CSS button.
Browser-Based Processing and Privacy
Every shadow is rendered in your browser. Nothing you set here is uploaded to BroBroGo. All calculations, slider adjustments, and code generation happen locally on your device, ensuring your design configurations remain entirely private.
Frequently Asked Questions
What do offset, blur, and spread actually control?
Offset moves the shadow left/right and up/down, blur softens its edges, and spread grows or shrinks it before blurring. A negative spread pulls the shadow in, useful for a tight, close shadow.
What does the inset option do?
A normal shadow falls outside the element, like light behind a raised card. Inset flips it inside instead, so the element looks pressed in — handy for sunken inputs or pressed buttons.
Why stack more than one shadow layer?
A single shadow looks flat past a certain size. Real elevation usually combines a tight, dark shadow with a soft, wider one — add a second layer and tune each independently to get that effect.