What is a CSS box shadow?

CSS box-shadow is a property that adds shadow effects around an element's frame. You can specify horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be layered for complex effects.

How do I create an inset shadow?

Add the 'inset' keyword to the box-shadow property. Inset shadows appear inside the element's border, creating a pressed or recessed effect. Toggle the Inset option in the generator to see the difference.

Can I have multiple box shadows?

Yes! CSS allows multiple box shadows separated by commas. This enables complex effects like combining an outer shadow with an inset highlight. Use the 'Add Shadow' button in our generator to layer multiple shadows.

Does box-shadow affect layout?

No, box-shadow doesn't affect layout or element size. It's rendered outside the element without affecting surrounding elements. Use the spread value to control how far the shadow extends.

How do I make a CSS glow effect?

A glow effect uses a colored shadow with 0 offset and high blur. For example: box-shadow: 0 0 20px rgba(99, 102, 241, 0.6). Try the 'Glow' preset in the generator for an instant example.

CSSボックスシャドウジェネレーター

ライブプレビューでCSSボックスシャドウを視覚的に生成。オフセット・ぼかし・広がり・色・複数レイヤーをカスタマイズできます。

プレビュー

CSS出力

box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.18);

水平オフセット0px

垂直オフセット4px

ぼかし半径16px

広がり半径-2px

色

不透明度18%

内側

プリセット

使い方

ライブプレビューでCSSボックスシャドウを視覚的に生成。オフセット・ぼかし・広がり・色・複数レイヤーをカスタマイズできます。

1Adjust the sliders to set horizontal offset, vertical offset, blur, and spread.
2Pick a shadow color and set the opacity for transparency.
3Toggle 'Inset' to switch between outer and inner shadows.
4Click 'Add Shadow' to layer multiple shadows for complex effects.
5Copy the generated CSS and paste it into your stylesheet.

主な機能

Real-time preview of box shadow effects
Multiple shadow layers for complex designs
Inset shadow support for pressed effects
8 professional presets to get started quickly

CSSボックスシャドウジェネレーター

使い方

主な機能

よくある質問