CSSボックスシャドウジェネレーター
オフセット、ぼかし、広がり、色、不透明度をスライダーとカラーピッカーで調整してCSSのbox-shadowをデザインし、プレビューボックスに適用される様子をリアルタイムで確認して、生成されたbox-shadow宣言をそのままスタイルシートにコピーできます。
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.35);使い方
オフセットXとオフセットYは影を水平・垂直方向に移動させ、ぼかし半径は影の端を柔らかくし、広がり半径はぼかしが適用される前に影を拡大・縮小します。影の色と不透明度を選び、「inset」を切り替えるとボックスの外側ではなく内側に影を描画できます。
ヒント
控えめな影が最も自然に見えることが多いです。小さめのオフセット、オフセットのおよそ2〜3倍のぼかし半径、そして50%を大きく下回る不透明度にすると、重たい輪郭ではなく柔らかく自然な浮き上がりに見えます。
複数の影を重ねることはできますか?
はい。CSSのbox-shadowはカンマ区切りの影のリストを受け付け、上から下へ重なって表示されます。このツールは一度に1つの影を生成するので、生成した宣言を複数組み合わせて(カンマで区切って)、より立体的でリアルな影を作ることができます。
このカテゴリの他のツール
正規表現テスター
サンプルテキストに対して正規表現をテストし、一致箇所をリアルタイムでハイライト表示します。
Cron式パーサー
5フィールドのcron式を分かりやすい説明に変換し、次回の実行時刻を確認できます。
テキストエンコーディング変換ツール
テキストをUTF-8 16進数、バイナリ、コードポイント、Base64、URLエンコード、HTMLエンティティに同時変換します。
パスワードジェネレーター
ブラウザ上で強力なランダムパスワードを瞬時に生成します。
JSONフォーマッター＆バリデーター
ブラウザ上でJSONを瞬時にフォーマット、検証、圧縮します。
UUID ジェネレーター
ブラウザ上で瞬時にランダムなRFC 4122バージョン4のUUIDを生成します。
JWT デコーダー
ブラウザ上でJSON Web Token(JWT)を瞬時にデコードして中身を確認します。
差分チェッカー
2つのテキストを比較し、追加・削除された行を即座に確認できます。
スラッグ生成ツール
任意のテキストをリアルタイムでクリーンなURLフレンドリーなスラッグに変換します。
進数変換ツール
2進数、8進数、10進数、16進数の間で数値を即座に変換します。
Unixタイムスタンプ変換ツール
Unixタイムスタンプを日時に、日時をUnixタイムスタンプにリアルタイムで変換します。
ハッシュジェネレーター
任意のテキストからSHA-1、SHA-256、SHA-512のハッシュ値をブラウザ上で生成します。
Cron式ビルダー
シンプルなフォームで有効な5フィールドのcron式を作成できます。構文を覚える必要はありません。
Lorem Ipsum ジェネレーター
モックアップやレイアウト用に、段落・文・単語単位でLorem Ipsumのダミーテキストを生成します。
Markdownプレビュー
左にMarkdownを書くと、右にレンダリングされたHTMLがリアルタイムで表示されます。
IPサブネット計算機
CIDR表記のIPv4アドレスを入力すると、ネットワーク・マスク・ブロードキャスト・ホスト範囲が分かります。
HTTPステータスコード検索
HTTPステータスコードを検索して、その標準的な意味を分かりやすく確認できます。
SQLフォーマッター
圧縮された、または乱雑なSQLを読みやすいインデント付きの文に整形します。
画像からBase64への変換ツール
画像をBase64データURIに変換し、HTML・CSS・JSONにそのまま貼り付けられます — すべてブラウザ内で処理。
Semver比較ツール
2つのセマンティックバージョン文字列を比較し、公式のsemver規則に従ってどちらが優先されるかを確認します。