CSS Box Shadow生成ツール

box-shadowをビジュアルUIでリアルタイム生成。複数シャドウ・inset対応。CSSコードをワンクリックコピー。

Shadow 1
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

使い方

  • スライダーでoffset-x, offset-y, blur, spread, opacity を調整
  • カラーピッカーでシャドウの色を変更
  • insetチェックボックスで内側シャドウを切り替え
  • 最大5つのシャドウを追加可能
  • 生成されたCSSをコピーしてプロジェクトに貼り付け

このツールをもっと活用する

もっと学びたい方へ

チートシート・技術記事・開発リソースで学習を加速