ライブビジュアルエディターで美しいCSSボックスシャドウを作成。オフセット、ぼかし、拡散、カラーを調整 — 即座に使用できるCSSをコピー。100%無料・クライアントサイド。
Adjust the controls to see the shadow effect in real-time
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);CSS Box Shadowジェネレータは、HTML要素の周りに美しいドロップシャドウを作成するビジュアルツールです。水平オフセット、垂直オフセット、ぼかし半径、拡散半径、カラーのすべてのパラメータをリアルタイムで微調整できます。
CSSボックスシャドウは、HTML要素のフレームの周りにシャドウを追加する視覚効果です。box-shadowプロパティで定義され、水平オフセット、垂直オフセット、ぼかし半径、拡散半径、カラーで構成されます。
拡散半径（展開とも呼ばれます）はシャドウのサイズを制御します。正の値はシャドウを拡大し、要素自体より大きくします。負の値はシャドウを縮小します。
インセットシャドウは要素の境界線内に表示され、奥行きや内側ベベルの錯覚を作り出します。押されたボタンの効果、カードのエンボス、内側グローに一般的に使用されます。
はい。生成されたbox-shadow構文はCSS標準に準拠しており、すべてのモダンブラウザで動作します。
An inset shadow appears inside the element rather than outside. It creates a recessed or pressed effect, commonly used for buttons that look pushed in or for creating inner depth on containers.
To create a glow effect, set both Horizontal and Vertical Offset to 0, use a larger Blur Radius (15-30px), choose a bright color, and increase the opacity. You can also add a positive Spread Radius to intensify the glow.
While CSS box-shadow is well-supported, subtle rendering differences can occur between browsers due to how each engine handles anti-aliasing and color blending. The differences are usually minor and the shadow will look great across all modern browsers.
Absolutely! The CSS code generated by this tool is standard CSS that you can use in any project — personal, commercial, or open source. There are no restrictions on how you use the generated code.