Flat blocks, buttons without depth, cards that blend into the background: this is the typical look of a site where the designer went easy on box-shadow. Yet a couple of lines of CSS can transform dull markup into an interface with character by adding whitespace, highlighting a key block, or softly separating a section without a single border.

The problem is that most developers stop at the default gray shadow 0px 2px 5px rgba(0,0,0,0.2) and forget that box-shadow can do much more: multi-layered shadows, colored glows, neumorphism, inset effects, and even pixel art rendering without a single div.

Below are 13 techniques that will turn box-shadow from a boring utility into your main tool for working with depth. Every snippet is copied from real projects and ready to use.

💡 Quick overview:

• Breaking down box-shadow syntax so you remember it the first time
• 13 ready-to-use snippets: from a barely visible border to multi-layered colored glow
• Three ways to include CSS in HTML and when to use each
• Frequently asked questions: performance, filter drop-shadow, Chrome inspector, and neumorphism

What is box-shadow and how does it work

The box-shadow property adds one or more shadows to an element. Unlike border, a shadow does not affect document flow and does not increase the block's dimensions; it is drawn "outside," beyond the element's boundaries.

Full syntax:

1
box-shadow: offset-x offset-y blur-radius spread-radius color;

Breakdown of each parameter:

• offset-x, horizontal offset. A positive value shifts the shadow to the right, a negative value shifts it to the left.
• offset-y, vertical offset. Positive moves the shadow down, negative moves it up. These are the only two required parameters.
• blur-radius, the blur radius. The larger the value, the softer and wider the shadow. The default is 0, meaning a shadow with sharp edges.
• spread-radius, the spread radius. A positive value expands the shadow outward, a negative value shrinks it inward. Useful for simulating borders without border.
• color, the color in any format: hex, rgb(), rgba(), hsl(). Transparency via rgba() or hsla() produces the most natural shadows.

The trick is that you can pass multiple values, separated by commas. This is precisely what opens the door to the techniques below: each subsequent shadow in the list is layered on top of the previous one.

1. Barely visible shadow on three sides

A minimalist shadow that adds depth but does not scream for attention. Perfect for product cards, article previews, and any blocks on a light background.

1
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

An offset only downward by 8px and a large blur of 24px create a floating block effect. An opacity of 0.2 makes the shadow barely visible on white, just enough for the eye to feel comfortable.

2. Light shadow on all sides

When a block needs a shadow evenly around its perimeter, for example, for a modal window or tooltip.

1
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Zero horizontal offset and a spread-radius of 0px distribute the shadow symmetrically. A large blur-radius (29px) makes the transition smooth. The color rgba(100, 100, 111, ...) gives a cool gray tone; it looks better on white than pure black.

3. Thin shadow to the right and bottom

The classic "raised" effect. Works for buttons, cards with hover states, and any element that should look tactile.

1
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Small offset values (around 2px) and a small blur create a sharp, almost vector-like shadow. Pairs well with transform: translateY(-2px) on hover; the shadow "moves" with the block, enhancing the lift effect.

4. Rich shadow on all sides

For cases when an element needs to stand out noticeably from the background: hero sections, cards with important content, banners.

1
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

High opacity (0.35) and a small blur (15px) produce a pronounced, readable shadow. With zero horizontal offset, it lies evenly; the block looks as if it is floating above the page.

5. Diffused multi-layered shadow

Five shadow layers working together: one deep layer for separation from the background, the rest for soft diffusion on the sides.

1
box-shadow:
2
  rgba(0, 0, 0, 0.25) 0px 54px 55px,
3
  rgba(0, 0, 0, 0.12) 0px -12px 30px,
4
  rgba(0, 0, 0, 0.12) 0px 4px 6px,
5
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
6
  rgba(0, 0, 0, 0.09) 0px -3px 5px;

The first layer is the main shadow downward (54px, opacity 0.25). The second is a light shadow upward (negative offset -12px). The rest refine the edges. Together they produce a complex, realistic light-and-shadow pattern, like a physical object under diffused lighting.

6. Thin border with an inner shadow

Two shadows create the illusion of a thin border (border) while also adding depth. Not a single border in the code.

1
box-shadow:
2
  rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3
  rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4
  rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Breakdown of the three layers:

• First, the "border": zero offset and blur, spread-radius of 2px mimics border: 2px solid.
• Second, the main shadow downward for volume.
• Third, a white inset shadow from above, giving a highlight (glass effect).

7. Shadow to the left and bottom

A non-standard direction: the shadow falls to the left and slightly down. Looks good on elements aligned to the right edge or for creating an asymmetrical composition.

1
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

A negative horizontal offset (-4px) sends the shadow to the left. A negative spread-radius (-6px) tucks the shadow inward, making it more compact than the block itself; it does not "stick out" beyond the edges.

8. Two-sided shadow: light from top-left, shadow bottom-right

Simulating a directional light source, as if a lamp is shining from the upper left corner.

1
box-shadow:
2
  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3
  rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

The first layer is a bluish shadow (rgba(136, 165, 191, ...)) to the right and bottom. The second is a white "highlight" to the left and top (negative offsets, high opacity). Together they create a realistic three-dimensional effect; the block looks as if it is lit by a softbox.

9. Colored glow border

A single shadow with zero offset and blur, but with a positive spread-radius, produces a neat colored glow around the element.

1
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

A blue glow (rgba(3, 102, 214, ...)) with a 3px radius. Perfect for inputs in focus (:focus), active buttons, and highlighting the current menu item. Replace the color with rgba(220, 38, 38, 0.3) and you get a validation error highlight.

10. Double inner shadow for a "pressed" effect

Two inset layers create a deep concave effect. Suitable for textured backgrounds, pressed buttons, and decorative panels.

1
box-shadow:
2
  rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3
  rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

The inset keyword moves the shadow inside the element. The first layer is a wide shadow from above. The second is darker and more compressed, also from above. A negative spread-radius (-12px, -18px) prevents the shadows from filling the entire block; the edges remain light while the center is recessed.

11. Colored "cascade" of shadows downward

Five layers of the same color with increasing offset create a multi-layered colored shadow effect, like Material Design but brighter.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 0px 5px,
3
  rgba(240, 46, 170, 0.3) 0px 10px,
4
  rgba(240, 46, 170, 0.2) 0px 15px,
5
  rgba(240, 46, 170, 0.1) 0px 20px,
6
  rgba(240, 46, 170, 0.05) 0px 25px;

Each subsequent layer is shifted 5px further and has lower opacity. No blur is specified, so the shadows are sharp, like vector stripes. This produces a bright neon trail behind the block. Replace the pink with your brand color to get a recognizable accent.

12. Colored "cascade" to the right and down

The same technique but with horizontal offset; the shadow goes diagonally.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 5px 5px,
3
  rgba(240, 46, 170, 0.3) 10px 10px,
4
  rgba(240, 46, 170, 0.2) 15px 15px,
5
  rgba(240, 46, 170, 0.1) 20px 20px,
6
  rgba(240, 46, 170, 0.05) 25px 25px;

A diagonal cascade creates a sense of movement to the right and down. Looks great on buttons on hover; the block seems to "slide" behind its shadow.

13. Diffused shadow with a density gradient

Five layers where each subsequent offset doubles (2px, 4px, 8px, 16px, 32px) while opacity remains constant. The result is a shadow with a smooth density gradient, the most realistic in the collection.

1
box-shadow:
2
  rgba(0, 0, 0, 0.09) 0px 2px 1px,
3
  rgba(0, 0, 0, 0.09) 0px 4px 2px,
4
  rgba(0, 0, 0, 0.09) 0px 8px 4px,
5
  rgba(0, 0, 0, 0.09) 0px 16px 8px,
6
  rgba(0, 0, 0, 0.09) 0px 32px 16px;

A small blur for each layer (1px, 2px, 4px, 8px, 16px) grows proportionally to the offset. This produces physically accurate diffusion; the shadow "fades" with distance, as in the real world. Perfect for cards that need to look as natural as possible.

Three ways to include CSS in HTML

Once a snippet is chosen, you need to add it to the page. CSS offers three options, and each has its niche.

Internal CSS

Rules are placed in a <style> tag inside the <head> of the HTML document. Suitable for one-page sites and quick prototypes; everything is in one file.

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <style>
6
    .card {
7
      display: block;
8
      margin: 0 auto;
9
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10
    }
11
  </style>
12
</head>
13
<body>
14
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
15
</body>
16
</html>

The downside is that styles are not cached separately by the browser and cannot be reused on other pages.

Inline CSS

Styles are written directly in the style attribute of an HTML element. The fastest way to apply styles on the fly, but also the most inconvenient to maintain.

1
<img
2
  src="screenshot.jpg"
3
  alt="Пример карточки с тенью"
4
  style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5
>

Use inline styles selectively: for dynamic values from JavaScript, for email layouts (where external stylesheets are often stripped by email clients), and for critical CSS "above the fold."

External CSS

Rules are moved to a separate .css file and linked via <link>. This is the standard for any project more complex than a single page.

File styles.css:

1
.card {
2
  display: block;
3
  margin: 0 auto;
4
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5
}

HTML document:

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <link rel="stylesheet" href="styles.css">
6
</head>
7
<body>
8
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
9
</body>
10
</html>

External CSS is cached by the browser, easy to maintain, and scalable. In all three cases, the rendering result is the same; choose the method based on your project's architecture.

A short but dense video (8 minutes): the author shows how to replace flat gray shadows with gradient glows, layer by layer, explaining each parameter.

⁉️🤔 Frequently asked questions

What is the difference between box-shadow and filter: drop-shadow()?

box-shadow follows the bounding box shape of the element, always a rectangle. filter: drop-shadow() follows the alpha channel and traces the actual shape: for a PNG with transparency, the shadow will follow the object's contour rather than the rectangular frame. That is why drop-shadow() is indispensable for images with a cut-out background, icons, and SVG. But it works slower because the browser analyzes pixels, not block geometry.

How many box-shadow layers can you set without losing performance?

There is no formal limit, but the practical ceiling on an average device is 10-15 layers. Beyond that, you will start noticing FPS drops during scrolling and animations, especially on mobile devices. The reason is that each layer requires a separate rendering pass. For animated elements, limit yourself to 2-3 layers and use will-change: box-shadow; this hints to the browser to move the element to a separate composite layer.

How do you view and debug box-shadow in Chrome DevTools?

Open DevTools (F12), select the element in the Elements tab, and find the box-shadow property in the Styles panel on the right. Click on the color square icon next to the value; a visual shadow editor will open with sliders for offset-x, offset-y, blur, and spread. You can change values with the mouse and see the result immediately. For multi-layered shadows, each layer is edited separately; they are listed in the same field, separated by commas.

What is neumorphism and how do you achieve it with box-shadow?

Neumorphism is a visual style where elements look as if they are "molded" from the same material as the background. It is achieved with two shadows: a light one from the top-left and a dark one from the bottom-right (as in technique #8). The key condition is that the page background and the element color must match or be very close. Example for a light theme:

1
> .neuromorphic {
2
>   background: #e0e0e0;
3
>   box-shadow:
4
>     8px 8px 16px #bebebe,
5
>     -8px -8px 16px #ffffff;
6
> }
7
> ```

1
 

plaintext

1
 
2
 markdown 
3
 
4
The style is striking but controversial from an accessibility standpoint: low contrast makes elements hard to distinguish for people with visual impairments. Use sparingly and be sure to check contrast.
5
 
6
**Can you use box-shadow to render shapes without a div?**
7
 
8
> Yes, and this is a separate genre of CSS art. Since `box-shadow` supports an unlimited number of layers, each with its own coordinates and color, you can "draw" pixel art with a single `box-shadow` on a single `div`. The technique works like this: each layer with a 1px × N offset and zero blur is one "pixel." Hundreds of layers combine into an image. Generators like [CSS Box Shadow Generator](https://getcssscan.com/css-box-shadow-examples) automate the process, but for production this is more of a novelty; SVG will do the job more efficiently.
9
 
10
## Which shadow should you choose for your project?
11
 
12
The thirteen techniques above cover the full spectrum: from an unobtrusive shadow for modest cards to a bold neon cascade. The key skill here is not memorizing all the snippets but understanding the logic of the parameters; then you can assemble the right shadow for the task faster than you can find a ready-made one.
13
 
14
A quick guide:
15
 
16
- Need depth without visual noise? Use techniques **1-3** (barely visible single shadows).
17
- Want realistic "hovering" above the page? **5** (multi-layered diffused) or **13** (density gradient).
18
- Want to highlight an interactive element with color? **9** (colored border) or **11-12** (colored cascade).
19
- Simulating pressed or glass effect? **6** and **10** (inset shadows).
20
- Need neumorphism? **8** (two-sided shadow) plus a background matching the element.
21
 
22
Bookmark this page as a cheat sheet. And if you create your own signature shadow recipe, test it on real devices: the same shadow can look completely different on a Retina display and on a budget office monitor.
23

plaintext

1