IsekaiKit › ツール

CSS box-shadow ジェネレーター

スライダーを動かすとカードがすぐに変わります。レイヤーを重ねると、やわらかく自然な奥行きが出せます。


レイヤー

色

カード

角丸
カードの色
背景

プリセット

使い方

レイヤー 1 つが影 1 つです。横・縦オフセットで位置を動かし、ぼかしで輪郭をやわらげ、広がりで大きさを調整します。「内側」をオンにすると影がボックスの内側に入ります。レイヤーはいくつでも重ねられ、1 番目が一番上に描かれます。いい感じになったら CSS をコピーしましょう。

自然な影のコツ

影は下に落ちるので、横オフセットは 0 付近、縦オフセットはプラスに。不透明度は 5〜20% くらいにすると真っ黒より自然です。「多層」プリセットのように、ぼかしとオフセットを少しずつ大きくした影を重ねると、1 枚の影では出せないなめらかな奥行きになります。

データは安全?

はい。すべてブラウザの中で処理され、貼り付けた内容がサーバーに送信されることはありません。

ほかにもどうぞ

JSON 整形 JSON の整形・検証・圧縮。エラーは行と列で表示。 Base64 エンコード/デコード UTF-8 対応の Base64 変換。ファイルを data URL にも。 URL エンコード/デコード URL のパーセントエンコード・デコード。クエリパラメータも一覧表示。 UUID 生成 UUID v4 や時系列順の v7 をまとめて生成。 Unix タイムスタンプ変換 エポック秒・ミリ秒と日時を相互変換。 ハッシュ生成 テキストやファイルの MD5・SHA-1・SHA-256・SHA-512。 JWT デコーダー JSON Web Token のヘッダーとペイロードを表示、有効期限もチェック。 正規表現テスター JavaScript の正規表現をリアルタイムでテスト。マッチとグループを表示。 カラーコード変換 HEX・RGB・HSL を相互変換。白・黒文字とのコントラストもチェック。 パスワード生成 条件を選んで強力なランダムパスワードを作成。 CSS グラデーション生成 線形・円形・扇形のグラデーションを見ながら作って CSS をコピー。 CSV JSON 変換 CSV と JSON を相互変換。引用符・改行・タブ・セミコロンにも対応。 YAML JSON 変換 YAML と JSON を相互変換。構文エラーは行番号で表示。 XML ビューア XML を貼り付けて、表・JSON・整形した XML で確認。 Cron 式ジェネレーター cron のスケジュールを日本語で説明し、次回の実行日時を表示。 サブネット計算 IPv4・IPv6 のサブネット計算。ネットワーク、ブロードキャスト、ホスト範囲、分割も。 テキスト差分チェック 2 つのテキストを比べて、追加・削除された行を表示。