CSS シャドウ ビルダー — box-shadow / text-shadow を GUI で組み立て
CSS の box-shadow と text-shadow を GUI で組み立てるツール。Mode で box / text を切り替え、offset-x / offset-y / blur / spread (box のみ) / color / inset (box のみ) をスライダーと数値入力で調整。多重シャドウ (カンマ区切りで複数重ね) に対応し、Material Design 風の影や Neumorphism / 文字の縁取り / 蛍光グロー など 9 種類のプリセットからワンクリックで開始。ライブプレビュー (実 div / 実テキスト) + 値だけ / 宣言付き コピー切替対応。gradient-css の対称ツールとして CSS スタイル系のロングテール需要を満たします。すべてブラウザ内で処理。
使い方
Mode で box-shadow か text-shadow を選び、プリセットからスタートするか『シャドウを追加』で 1 レイヤーずつ組み立てます。各シャドウは X / Y オフセット、ぼかし (blur)、広がり (spread = box のみ)、色、inset (内側影 = box のみ) を持ち、スライダーまたは数値入力で調整。複数のシャドウを重ねれば Material Design のような『拡散する持ち上げ感』や、Neumorphism (新しい立体感)、文字の縁取り、ネオン風グロー など複雑な表現が作れます。プレビューは実 div / 実テキストで描画され、CSS 値はワンクリックでコピー (値のみ / 宣言つき を切替)。
よくある質問
- なぜシャドウを複数重ねるのですか?
- 現実の光と影は単一の方向 × 単一のぼかしではなく、近接の硬い影 + 遠くからの拡散光 + 環境光 が合わさってできています。box-shadow も同じで、ぼかしの違う 2〜3 枚を重ねると Material Design の elevation のように奥行きと自然さが出ます。プリセット『カード影』『持ち上げ感』は 2 枚重ね、『ニューモーフィズム』は明暗 2 方向で立体感を演出。
- spread と inset が text-shadow にないのはなぜ?
- CSS 仕様で text-shadow は `<offset-x> <offset-y> <blur-radius> <color>` の 4 値のみ。spread (広がり) と inset (内側) は box-shadow 専用です。Mode 切替時にこれらの入力欄は自動で非表示になります。
- 色に rgba() で透明度を入れるべきですか?
- 影は通常 5〜30% の半透明にすると自然です。本ツールのカラーピッカーは #RRGGBB を返しますが、テキスト入力欄に `rgba(0, 0, 0, 0.18)` のような書き方を直接入れられます。プリセットはすべて rgba ベースで設計されています。
- 出力は Tailwind の任意値クラスでも使えますか?
- そのままでは使えませんが、CSS 値 (例: `0 8px 24px -4px rgba(0,0,0,.18)`) を Tailwind の `shadow-[<value>]` に貼り付ければ任意値として動きます。スペースをアンダースコアにする必要があります (Tailwind の任意値仕様)。
- 実 DOM の見た目とエクスポート CSS が違うことはありますか?
- ブラウザ間で box-shadow / text-shadow の描画ピクセル単位の差は出ます (アンチエイリアスや subpixel 処理) が、ロジック上の値は厳密に同じです。Safari / Chrome / Firefox で微妙な差を感じる場合は spread や blur を 1〜2px 調整して詰めてください。
類似のツール
CSS グラデーション生成 (linear / radial / conic)
linear-gradient / radial-gradient / conic-gradient の 3 種類を **Mode 切替** で組めるブラウザ完結ビルダー。色ストップを追加・削除しながらライブプレビュー、角度 (linear / conic) や形・サイズ (radial)、中心位置 (radial / conic) を調整、CSS 文字列を `background: ...` 形式または値だけで出力します。Tailwind の任意値クラス `bg-[linear-gradient(...)]` にもそのまま貼れる形式。プレビュー / 計算はすべてブラウザ内で完結し、サーバーへ送信しません。
CSS easing ビルダー — cubic-bezier(x1,y1,x2,y2) GUI 編集
CSS の transition / animation で使う cubic-bezier() を、SVG プレビュー曲線 + ドラッグできる制御点 + 数値スライダーの 3 通りから組み立てるビルダー。ease / ease-in / ease-out / ease-in-out などの標準プリセット、Material 風の cubic、back (オーバーシュート) も収録。動きの実プレビュー (バーが画面端まで往復) で実際の感触を確認できます。出力は cubic-bezier(...) 値とそのまま貼れる transition-timing-function 宣言を切替可能。すべてブラウザ内で計算します。
カラー変換 — HEX / RGB / HSL / HSV を相互
HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。
コントラスト比チェッカー — WCAG AA / AAA 判定
前景色 (文字色) と背景色を選ぶだけで、WCAG 2.x のコントラスト比を計算し、通常の文字・大きな文字・UI 部品それぞれで AA / AAA を満たすかをその場で判定します。HEX と rgb() 入力、カラーピッカー、ライブプレビュー付き。すべてブラウザ内で処理され、色情報は外部に送信されません。