CSS ボックスシャドウ ジェネレーター
レイヤー、inset、ぼかし、広がり、色を使って CSS の box-shadow を視覚的に作成。ライブプレビュー、ニューモーフィズムなどのプリセット、コピー可能な CSS。
- アップロードなし
- 制限なし
- 登録不要
プリセット
- 入力:
- ワンクリック
- 出力:
- テキスト
- 実行環境:
- お使いの端末
- サイズ上限:
- なし
- アカウント:
- 不要
CSS ボックスシャドウ ジェネレーター の使い方
シャドウを調整
オフセット・ぼかし・広がり・不透明度のスライダーを動かし、色を選びます。内側の影には「内側（inset）」をオンにします。
レイヤーを重ねるかプリセットを使う
レイヤーを追加してリアルな奥行きを出すか、ソフト・ハード・ニューモーフィズム・レイヤー重ねなどのプリセットから始めます。
CSS をコピー
そのまま使える box-shadow（または text-shadow）の宣言をスタイルシートにコピーします。
Toolshed で CSS ボックスシャドウ ジェネレーター を使う理由
アップロードなし
すべてこのブラウザのタブ内で処理されます。ファイルが端末の外に出ることはありません。
制限なし
ファイルサイズの上限も、1 日の利用回数の制限もありません。端末が処理できる限り、いくらでも使えます。
登録不要
アカウントもメールアドレスも不要で、透かしも入りません。
よくある質問
複数のレイヤーを使う理由は？
控えめな影を重ねるほうが、濃い影 1 つより自然に見えます。小さなぼかしを距離を変えて重ねると実際の光に近づき、なめらかな奥行きになります。
inset とは？
inset の影はボックスの外側ではなく内側に描かれます。押された状態のボタン、入力欄、内側の光に便利です。
テキストシャドウも作れますか？
はい。「テキストシャドウ」に切り替えると text-shadow をプレビュー・コピーできます。テキストには広がりと inset がないため、これらの操作は非表示になります。
ファイルはどこかにアップロードされますか？
いいえ。CSS ボックスシャドウ ジェネレーター はすべてブラウザ内で動作します。ファイルは端末上で処理され、サーバーに送信されることはありません。
ファイルサイズの上限はありますか？
決まった上限はありません。制限となるのは端末のメモリだけです。非常に大きなファイルは、パソコンのブラウザのほうが快適に動作します。
CSS ボックスシャドウ ジェネレーター は本当に無料ですか？
はい。アカウントは不要で、透かしも入りません。各ダウンロードは、短い広告（視聴は任意）か 20 秒の待ち時間で有効になります。このしくみで無料を維持しています。