CSS ボックスシャドウジェネレーター

ブラウザ内で box-shadow のオフセット、ぼかし、拡散、透明度、角丸、inset を調整し、ライブプレビューと CSS コピーに対応します。

CSS ボックスシャドウジェネレーター

CSS ボックスシャドウジェネレーターは、box-shadow の水平・垂直オフセット、ぼかし、拡散、透明度、角丸、inset をブラウザ内で調整し、カードやボタンの影をリアルタイムで確認できます。

使い方

  1. 水平オフセット、垂直オフセット、ぼかし、拡散を調整します。
  2. 影の色、背景色、透明度、角丸を設定します。
  3. 必要に応じて inset 内側の影へ切り替えます。
  4. 生成された CSS をコンポーネントのスタイルやデザイン共有メモにコピーします。

特徴

  • 主要な box-shadow パラメータを視覚的に調整可能
  • 外側の影と inset 内側の影に対応
  • ローカルのライブプレビューと CSS コピー出力

使う理由

  • カード、ボタン、入力欄、浮遊面の奥行きをすばやく調整できる
  • 構文を手書きして何度も確認する手間を減らせる
  • デザインと実装で使える CSS 値をそのまま共有できる

関連カラー工具

GIF作成

静止画や動画の断片から動くGIFを作成します。

画像サイズ変更

画像サイズを一括で変更し、ピクセルや比率指定、比率固定、ローカル保存に対応します。

画像を ICO に変換

画像を favicon やアプリアイコン向けの ICO に変換し、複数サイズを1ファイルにまとめられます。

SVG を PNG/JPG に変換

SVG を PNG または JPG に書き出し、サイズや背景色を設定してローカル保存できます。

SVG 最適化

ブラウザ内で SVG コードを最適化し、不要なメタデータを削除して軽量な SVG を出力します。

EXIF ビューア

ブラウザ内で画像の EXIF、GPS、カメラ情報、撮影パラメータを読み取ります。

画像メタデータ削除

ブラウザ内で JPEG、PNG、WebP 画像から EXIF、XMP、ICC などのメタデータを削除します。

画像パレット抽出

画像から主要色、比率、カラーパレットを抽出し、HEX、CSS、JSON としてローカル出力できます。

カラーピッカー

ブラウザ内で手動入力、画面、アップロード画像から色を取得し、HEX、RGB、HSL、HSV、CMYK、CSS 値を確認できます。

カラーコンバーター

ブラウザ内で HEX、RGB、HSL、HSV、HWB、LAB、LCH、CMYK、CSS キーワード間の色変換を双方向で行い、アルファにも対応します。

カラーコントラストチェッカー

前景色と背景色の WCAG コントラスト比をブラウザ内で確認し、通常文字と大きな文字の AA / AAA を判定します。

CSS グラデーションジェネレーター

ブラウザ内で linear-gradient、radial-gradient、conic-gradient を作成し、カラーストップ編集、ライブプレビュー、CSS コピーに対応します。

HTML カラーネーム一覧

ブラウザ内で HTML / CSS の命名色を検索・一覧表示し、色名、HEX、RGB をコピーできます。

favicon 生成

1枚の画像から favicon 一式、site.webmanifest、HTML 断片を生成します。

Gemini ウォーターマーク除去

Gemini の可視ウォーターマークをブラウザ内でローカル除去し、まとめて処理・保存できます。

画像を AVIF に変換

PNG や JPG などの画像を一括で AVIF に変換し、品質、縮尺、ZIP 保存に対応します。

PNG 圧縮

PNG のまま容量を圧縮し、縮尺や色数削減、プレビュー、ZIP 保存に対応します。

画像を WebP に変換

PNG や JPG などの画像を品質・縮尺を調整しながら一括で WebP に変換し、プレビューと ZIP 保存にも対応します。