← すべてのテキストツール

シャドウスケールジェネレーター

揃ったボックスシャドウ(エレベーションレベル)をCSS変数として作成します。

  • 無料
  • 登録不要
  • どの端末でも使える

約シャドウスケールジェネレーター

デザインシステムでは、ランダムな影ではなく、決まった段階の高さ(エレベーション)を使います。このツールは、角度、ぼかしの増え方、不透明度が一貫した、小から大までのbox-shadowの値を作成し、--shadow-smや--shadow-lgのようなCSSカスタムプロパティとして出力するため、カード、メニュー、モーダルの統一感が保たれます。

シャドウスケールジェネレーターの使い方

  1. 影の色、基本の強さ、レベルの数を選択してください。
  2. サンプルカードで、立体感のレベルをプレビューしてください。
  3. CSS変数をスタイルシートにコピーしてください。

このツールを使う理由

別名

よくある質問

影を1つではなく、重ねて使うのはなぜですか?

ぼかしを段階的に増やした複数のやわらかな影を重ねると、濃い影を1つ付けるより自然に見えます。現実の光は、密着した細い影と、広がる環境光の影の両方を生むからです。

影のレベルは、いくつ必要ですか?

ほとんどのインターフェースは、ボタン用の小から、ダイアログ用の大まで、4~6段階でうまく機能します。それ以上は、人が区別するのが難しくなります。

影はどの色にすべきですか?

背景色の半透明の暗い色合いのほうが、純粋な黒よりも自然に見えます。ダークテーマでは、影が見えにくくなるため、強さを少し上げてみてください。

シャドウスケールジェネレーターは無料ですか?

はい。Toolipediaのシャドウスケールジェネレーターは無料で、登録不要、透かしもありません。

安全に使えますか?

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか?

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか?

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

シャドウスケールジェネレーター を自分のサイトに置けますか?

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール