---
title: "Box Shadowジェネレーター - box-shadowのCSSを作成 | Web ToolBox"
description: CSSのbox-shadowを視覚的に調整してコードを生成できるツールです。色、ぼかし、広がり、位置、内側の影を設定し、影付きデザインの作成に活用できます。
canonical_url: "https://web-toolbox.dev/tools/box-shadow-generator"
meta:
  author: K
  "og:description": CSSのbox-shadowを視覚的に調整してコードを生成できるツールです。色、ぼかし、広がり、位置、内側の影を設定し、影付きデザインの作成に活用できます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/box-shadow-generator-2c54fd1a.png"
  "og:image:alt": "Box Shadowジェネレーター"
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Box Shadowジェネレーター - box-shadowのCSSを作成 | Web ToolBox"
---

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

# **Box Shadowジェネレーター**

box-shadowを調整して影のCSSを作成

## **影の設定**

**位置とぼかし**

offsetX

px

offsetY

px

blur

px

spread

px

**色と効果**

**影の色**

**inset**

**プレビュー設定**

**ボックス**

**背景**

## **プレビュー**

**CSSコード**

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

## Box Shadowジェネレーターとは？

CSS の `**box-shadow**` を視覚的に調整して、影の見た目とコードを確認できるツールです。オフセット、ぼかし、広がり、色、inset を調整しながらリアルタイムでプレビューできます。

カード、ボタン、モーダルなどの影を作りたいときに便利です。

## 使い方

1. スライダーで影の値を調整します。
2. 影の色や inset を必要に応じて切り替えます。
3. プレビューで見た目を確認します。
4. 生成されたCSSをコピーして使います。

## 主な設定項目

### offsetX / offsetY

影の位置を左右・上下に動かします。正の値と負の値で影の出る方向が変わります。

### blur

影のぼかし具合を調整します。値が大きいほど柔らかい影になります。

### spread

影の広がりを調整します。影を大きくしたいときや、締まった影にしたいときに使います。

### Shadow Color / inset

影の色を変えられます。`**inset**` をオンにすると、外側ではなく内側の影になります。

### プレビューカラー

ボックス色と背景色を切り替えられます。これは見た目確認用で、生成されるCSSには含まれません。

## 入出力例

たとえば `**offsetX: 0**`, `**offsetY: 8**`, `**blur: 16**`, `**spread: 0**`、色を `**rgb(0 0 0 / 0.15)**` にすると、次のようなCSSになります。

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

`**inset**` をオンにすると、次のような出力になります。

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

## 活用シーン

- ボタンやカードに自然な影を付けたいとき
- モーダルやパネルの浮き上がり感を調整したいとき
- inset を使って凹み感を作りたいとき
- 色違いの影をプレビューしながら比較したいとき

## 使うときの注意点

- プレビューカラーは生成されるCSSには含まれません
- ぼかしや広がりを大きくしすぎると、輪郭が弱く見えることがあります
- inset と通常の影では印象が大きく変わるため、用途に合わせて確認するのが安全です

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/box-shadow-generator#webpage","@type":"WebPage","description":"CSSのbox-shadowを視覚的に調整してコードを生成できるツールです。色、ぼかし、広がり、位置、内側の影を設定し、影付きデザインの作成に活用できます。","name":"Box Shadowジェネレーター - box-shadowのCSSを作成","url":"https://web-toolbox.dev/tools/box-shadow-generator","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/box-shadow-generator"]}]},{"@id":"https://web-toolbox.dev/tools/box-shadow-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"CSSのbox-shadowを視覚的に調整してコードを生成できるツールです。色、ぼかし、広がり、位置、内側の影を設定し、影付きデザインの作成に活用できます。","name":"Box Shadowジェネレーター - box-shadowのCSSを作成","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

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