---
title: "Box Shadow Generator - Generate CSS for box shadows | Web ToolBox"
description: "Adjust CSS box-shadow values visually and generate code. You can set color, blur, spread, position, and inset shadows for shadow-based UI styling."
canonical_url: "https://web-toolbox.dev/en/tools/box-shadow-generator"
meta:
  author: K
  "og:description": "Adjust CSS box-shadow values visually and generate code. You can set color, blur, spread, position, and inset shadows for shadow-based UI styling."
  "og:image": "https://web-toolbox.dev/og/en/tools/box-shadow-generator-a17bfe44.png"
  "og:image:alt": "Box Shadow Generator"
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Box Shadow Generator - Generate CSS for box shadows | Web ToolBox"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **Box Shadow Generator**

Adjust box shadows and generate CSS

## **Shadow Settings**

**Position & Blur**

offsetX

px

offsetY

px

blur

px

spread

px

**Color & Effects**

**Shadow color**

**inset**

**Preview Settings**

**Box**

**Background**

## **Preview**

**CSS Output**

```
box-shadow: 0px 0px 20px 16px rgb(17 17 26 / 0.08);
```

## What is Box Shadow Generator?

Box Shadow Generator is a tool for adjusting CSS `**box-shadow**` visually and checking the generated code. You can tune offset, blur, spread, color, and inset while watching the preview update in real time.

It is useful for designing shadows for cards, buttons, modals, and other UI elements.

## How to Use

1. Adjust the shadow values with the sliders.
2. Change the shadow color or turn inset on if needed.
3. Check the preview.
4. Copy the generated CSS.

## Main Settings

### offsetX / offsetY

These control the horizontal and vertical position of the shadow. Positive and negative values change the direction of the shadow.

### blur

This controls how soft the shadow looks. Larger values create a softer shadow.

### spread

This changes how wide the shadow extends. It is useful when you want a tighter or broader shadow.

### Shadow Color / inset

You can change the shadow color. When `**inset**` is enabled, the shadow is drawn inside the element instead of outside it.

### Preview Colors

You can change the box color and background color for preview only. These values are not included in the generated CSS.

## Input and Output Example

For example, if you use `**offsetX: 0**`, `**offsetY: 8**`, `**blur: 16**`, `**spread: 0**`, and `**rgb(0 0 0 / 0.15)**` as the color, the result becomes:

```css
box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 0.15);
```

If you turn `**inset**` on, the result becomes:

```css
box-shadow: inset 0px 8px 16px 0px rgb(0 0 0 / 0.15);
```

## Use Cases

- Adding natural shadows to buttons or cards
- Adjusting elevation for modals and panels
- Creating inset shadows for pressed or recessed effects
- Comparing shadow colors while checking the preview

## Things to Keep in Mind

- Preview colors are not included in the generated CSS
- Too much blur or spread can make the shadow look weak or muddy
- Inset and outer shadows create very different impressions, so it is worth checking both in context

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/box-shadow-generator#webpage","@type":"WebPage","description":"Adjust CSS box-shadow values visually and generate code. You can set color, blur, spread, position, and inset shadows for shadow-based UI styling.","name":"Box Shadow Generator - Generate CSS for box shadows","url":"https://web-toolbox.dev/en/tools/box-shadow-generator","isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/box-shadow-generator"]}]},{"@id":"https://web-toolbox.dev/en/tools/box-shadow-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Adjust CSS box-shadow values visually and generate code. You can set color, blur, spread, position, and inset shadows for shadow-based UI styling.","name":"Box Shadow Generator - Generate CSS for box shadows","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.