コピペで使えるbox-shadowとすりガラス表現のサンプル集。奥行きを出す多層影・カラー影から、背景が透けるグラスモーフィズムまで、シャッフルで色・ぼかしのバリエーションを試せます。表示中のプレビューとコードは常に一致するので、気に入ったらそのままコピーしてください。クラス名は .bnto-glass-frost 形式です。
該当するパーツが見つかりませんでした。
/* 背景に色や画像がある場所で使う */ .bnto-glass-frost { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45); border-radius: 18px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
<!-- 背景に色や画像がある上で使う --> <div class="bnto-glass-frost">ここに内容</div>
「後ろをぼかす backdrop-filter」「半透明の背景」「白っぽい薄い枠線」の3点セットで完成します。真っ白な背景の上では効果が見えないので、グラデーションや写真の上で使ってください。Safari対策に -webkit-backdrop-filter の併記も忘れずに。
/* 写真やカラフルな背景の上で */ .bnto-glass-dark { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(15,15,26,.45); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; box-shadow: 0 8px 32px rgba(0,0,0,.3); color: #fff; }
<div class="bnto-glass-dark">ここに内容</div>
白グラスより文字が読みやすく、モーダルやヒーロー上のカードに向きます。背景の暗さは rgba(15,15,26,.45) の透明度で調整。文字色は白系にして、コントラスト比4.5:1以上を確保しましょう。
.bnto-glass-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 14px 22px; background: rgba(255,255,255,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.6); box-shadow: 0 4px 24px rgba(0,0,0,.1); }
<!-- ページ最上部に置くとスクロールで追従 --> <nav class="bnto-glass-nav"> <strong>LOGO</strong> <a href="#">メニュー</a> </nav>
position: sticky でスクロールしても上部に貼り付きます。コンテンツがナビの下を通過するとき、すりガラス越しに透けて見えるのがポイント。ダークサイトなら背景を rgba(20,20,30,.55) に変えてください。
.bnto-shadow-soft { background: #fff; border-radius: 18px; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 8px 16px rgba(0,0,0,.06), 0 16px 32px rgba(0,0,0,.06); }
<div class="bnto-shadow-soft">ここに内容</div>
不透明度の低い影を「小・中・大」の3段で重ねるのが、自然でおしゃれな box-shadow の定番テクニック。1つの濃い影より立体感がなめらかに出ます。各段の距離を2倍ずつ増やすとバランスが取りやすいです。
.bnto-shadow-color { background: #fff; border-radius: 18px; box-shadow: 0 14px 30px hsl(5 100% 65% / 0.45); }
<div class="bnto-shadow-color">ここに内容</div>
影の色を要素内の写真やブランドカラーに合わせると、ポップで統一感のある印象に。透明度は / 0.45 の部分で調整します。濃くしすぎると悪目立ちするので0.3〜0.5あたりが使いやすいです。
.bnto-shadow-float { background: #fff; border-radius: 18px; box-shadow: 0 30px 50px -12px hsl(258 47% 56% / 0.5); }
<div class="bnto-shadow-float">ここに内容</div>
4つ目の値（-12px）は「広がり」のマイナス指定で、影を要素より小さく絞るのがコツ。Y方向に大きくずらした影と組み合わせると、宙に浮いているような距離感が出ます。
.bnto-shadow-long { background: hsl(26 90% 58%); color: #fff; border-radius: 14px; box-shadow: 1px 1px 0 hsl(26 60% 42%), 2px 2px 0 hsl(26 60% 42%), 3px 3px 0 hsl(26 60% 42%), 4px 4px 0 hsl(26 60% 42%), 5px 5px 0 hsl(26 60% 42%), 6px 6px 0 hsl(26 60% 42%), 7px 7px 0 hsl(26 60% 42%), 8px 8px 0 hsl(26 60% 42%), 9px 9px 0 hsl(26 60% 42%), 10px 10px 0 hsl(26 60% 42%), 11px 11px 0 hsl(26 60% 42%), 12px 12px 0 hsl(26 60% 42%), 13px 13px 0 hsl(26 60% 42%), 14px 14px 0 hsl(26 60% 42%), 15px 15px 0 hsl(26 60% 42%), 16px 16px 0 hsl(26 60% 42%); }
<div class="bnto-shadow-long">ここに内容</div>
ぼかし0の影を斜め45度に等間隔で重ねる、フラットデザイン系の演出。影の色は本体より暗い同系色にすると一体感が出ます。段数を増やすほど影が長く伸びますが、右下に影の分の余白が必要な点に注意。
.bnto-shadow-offset { background: hsl(202 73% 56%); color: #fff; border-radius: 14px; box-shadow: 7px 7px 0 hsl(202 66% 37%); }
<div class="bnto-shadow-offset">ここに内容</div>
ぼかし0（3つ目の値）にするとステッカーのようなくっきり影になります。ポップなサイトやバナー風の装飾と好相性。:hoverで transform: translate(3px,3px) と影を縮める組み合わせも定番です。
.bnto-shadow-ring { background: #fff; border-radius: 18px; box-shadow: 0 0 0 4px hsl(119 31% 51% / 0.35); }
<div class="bnto-shadow-ring">ここに内容</div>
オフセット0・ぼかし0で「広がり」だけ指定すると、borderと違ってレイアウトに影響しない縁取りが作れます。選択中のカードやフォーカス状態の強調に便利。太さは4つ目の値で調整します。
/* 暗い背景の上で映えます */ .bnto-shadow-glow { background: #fff; border-radius: 18px; border: 1.5px solid hsl(202 73% 56% / 0.55); box-shadow: 0 0 18px hsl(202 73% 56% / 0.55); }
<div class="bnto-shadow-glow">ここに内容</div>
オフセット0でぼかしだけを大きくすると、全方向に光がにじむネオン風の影になります。境界線と影を同じ色で揃えるのが発光感のポイント。白背景では光がほぼ見えないので、ダークセクションで使いましょう。
/* 親と同じ背景色 #EFEAE0 の上で */ .bnto-shadow-inset { background: #EFEAE0; border-radius: 18px; box-shadow: inset 3px 3px 8px rgba(0,0,0,.13), inset -3px -3px 8px rgba(255,255,255,.75); }
<div class="bnto-shadow-inset">ここに内容</div>
へこんで見える内側の影。左上を暗く・右下を明るくすると「上からの光」で凹んだ印象になります。ニューモーフィズム同様、親要素と同じ背景色の上で使うのが自然に見せる条件です。
.bnto-shadow-layered { background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04), 0 12px 24px rgba(0,0,0,.08); }
<div class="bnto-shadow-layered">ここに内容</div>
「1pxの薄い輪郭（広がりのみの影）」を混ぜると、白背景の上でもカードの縁がぼやけません。SaaS系UIでよく使われる上品な影で、管理画面やダッシュボードのカードに最適です。
CSSの box-shadow は「X方向オフセット・Y方向オフセット・ぼかし半径・広がり・色」の順で指定します。おしゃれなbox-shadowの見本を探すときに押さえておきたいのは、影はカンマ区切りで何層でも重ねられるということ。このページでは多層ソフト影・カラー影・ロングシャドウ・インセット（凹み）など、コピペするだけで使える影のパターンを12種類掲載しています。
グラスモーフィズムは、すりガラス越しに背景が透けて見える表現手法です。核となるのは backdrop-filter: blur() で、これは要素自体ではなく「要素の後ろ側」をぼかすプロパティ。そこに半透明の背景色と白っぽい薄い境界線を組み合わせると、ガラス板のような質感が完成します。グラスモーフィズムのCSSをコピペで使いたい方は、CSSタブのコードをそのまま貼り付ければ動きます。
①光は上から当たるのが自然なので、Y方向のオフセットをX方向より大きくする。②ぼかし半径はオフセットの2倍程度に大きめにとる。③色は真っ黒ではなく不透明度0.1前後の低い値にして、必要なら複数層を重ねる。この3点だけで「のっぺりした影」が一気に洗練されます。
backdrop-filterは後ろをぼかす仕組みのため、背景が単色だと効果がほぼ見えません。グラデーション・写真・カラフルな図形など、色の変化が大きい背景の上に置くほどガラスらしさが際立ちます。このページのプレビューがカラフルなのはそのためです。
Chrome・Edge・Firefox・Safariの現行版はすべて対応済みですが、Safariは -webkit-backdrop-filter のプレフィックス併記が安全です。非対応環境でもレイアウトは崩れず、半透明の背景だけが残る「ゆるやかな劣化」で済むため、安心して実戦投入できます。
backdrop-filter に対応しています。Safari向けに -webkit-backdrop-filter の併記を推奨します。非対応環境ではぼかしが効かず、半透明の背景だけが表示される「ゆるやかな劣化」になります。backdrop-filter は「要素の後ろ側」をぼかす仕組みのため、背景が真っ白や単色だと変化がほとんど見えません。グラデーションや写真など、色の変化がある背景の上に置いてください。box-shadow 自体をアニメーションさせるのは負荷が高めです。動かしたい場合は opacity や transform を使う方法がおすすめです。影・グラスと組み合わせて使いやすいパーツはこちら。