本文へスキップ
▚

シャドウ生成

box-shadowを設計。

preview
  • 不透明度15%
    横0px
    縦10px
    ぼかし15px
    広がり-3px
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.15);

自然な影は、ぼかしの大きい薄い影と小さく濃い影を重ねると作りやすくなります。inset を有効にすると内側の影になります。

シャドウ生成について

box-shadowジェネレーターは、要素の下に落ちる影のオフセット、ぼかし、広がり、色を調整して、Material風の elevation やカードUIの立体感を作るツールです。複数シャドウを重ねることもできます。 toco.toolsではスライダーで値を変えながらプレビューし、完成したbox-shadow宣言をコピーできます。 影は性能やアクセシビリティに影響することがあります。過度なぼかしは控えめにし、ダークモードでは色を調整してください。

使い方

  1. 影のパラメータを調整
  2. プレビューで見た目を確認
  3. CSSをコピー

よくある質問(FAQ)

box-shadowジェネレーターとは何ですか?

CSSのbox-shadow値を視覚的に作り、コピーできるツールです。

デザイン設定は外部に送られますか?

いいえ。すべてブラウザ内で処理されます。

複数の影を重ねられますか?

はい。複数のbox-shadowレイヤーを組み合わせて奥行きを調整できます。