角丸・影・グラデ・変形を1画面で重ねるCSSジェネレーターの使い方
公開日：2026年10月20日 更新日：2026年9月15日 運営：シルギア（アナライズギア株式会社） 対象ツール：CSSジェネレーター・プレイグラウンド
UI部品の見た目は、角丸だけ・影だけで決まることはほとんどありません。カードひとつ取っても、角丸・影・背景のグラデーション・わずかな傾きが同時にかかっています。ところが専用ジェネレーターは1プロパティごとに分かれていることが多く、値を作ってはツールを移り……と行き来するうちに全体のバランスを見失いがちです。このツールは、1つのプレビュー要素（.box）に5種類のプロパティをまとめて重ね、結果をリアルタイムに確認しながら「一式のCSS」を組み立てるための道具です。
1画面で「一式のCSS」を組み立てる
画面中央にプレビューの .box があり、その周りに角丸・影・背景グラデーション・効果（filter）・変形（transform）のパネルが並びます。スライダーを動かすと即座に .box に反映され、下部の「生成されたCSS」に .box { … } の形でコードが出ます。プリセット（カード・ガラス風・サンセット・ポップ・写真・ブロブなど）を選ぶと複数プロパティがまとめて設定されるので、そこを出発点に微調整していくのが最短です。値を貼り合わせる手間がなくなり、プロパティ同士がどう影響し合うかを目で見て理解できます。処理はすべてブラウザ内で完結し、設定値はどこにも送信されません。
扱える5つのプロパティと役割
重ねられるのは、役割の異なる次の5系統です。
- border-radius（角丸）：要素そのものの角の形。4隅を個別のスライダーで調整でき、単位は px と % を切り替えられます。
- box-shadow（影）：要素の外側、または inset で内側に落ちる影。位置X/Y・ぼかし・広がり・色・不透明度を指定します。
- background（グラデーション）：塗り。linear と radial を選び、角度と2色のストップ位置を決めます。
- filter（効果）：描画結果への画像的な加工。blur・brightness・contrast・grayscale・saturate・hue-rotate を扱えます。
- transform（変形）：移動・回転・拡大縮小・傾きという座標変換。translateX/Y・rotate・scale・skewX/Y を重ねられます。
border-radius が「形」、background が「塗り」、box-shadow が「外に落ちる影」、filter が「描いたあとの加工」、transform が「置き方の変換」と捉えると混乱しません。
「変更したぶんだけ」出力される仕組み
出力は初期値から動かしたプロパティだけに絞られます。角丸が全隅0、影とグラデーションが無効、filter が初期値（明るさ100%など）、transform が初期値（拡大1・回転0など）なら、その行は省かれます。CSSに「何もしていない指定」が混ざりません。
border-radius は4隅を最短のショートハンドに畳みます。値は左上→右上→右下→左下の時計回りで並び、末尾から連続する同値を省きます。4隅とも同じなら1つ（例：16px）、左上と右下が同じで右上と左下が同じなら2つ、というように短くなります。たとえば左上と左下だけ12pxで右側が0のときは 12px 0px 0px 12px と出ます。box-shadow は不透明度をrgbaのアルファに変換します。色 #1a2230（＝rgb(26, 34, 48)）と不透明度12%なら、アルファは 12÷100＝0.12 となり rgba(26, 34, 48, 0.12) が使われます。
組み合わせCSSの実例
実際に、角丸16px・薄い影・紫のグラデーション・軽い彩度アップ・少し傾けて拡大、を重ねると、生成されるCSSはこうなります。
- border-radius: 16px;
- box-shadow: 0px 10px 30px 0px rgba(26, 34, 48, 0.12);
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- filter: saturate(120%);
- transform: rotate(-4deg) scale(1.05);
このまま .box というクラスに貼り付けられます。使うときはクラス名を要素に合わせて書き換え、プレビューと同じ大きさにするなら幅・高さを別途指定してください。scale(1.05) は5%拡大、rotate(-4deg) は反時計回りに4度の傾きです。
box-shadowとfilter、transformの注意点
影には2種類の考え方があります。box-shadow は要素の矩形（角丸を含む枠）に沿って影を落とします。一方 filter の drop-shadow は、透過PNGや複雑な形など「不透明な部分の輪郭」に沿って影を落とします。本ツールが扱うのは box-shadow のみで、透過画像の形に沿った影が欲しいときは専用の filter ジェネレーターを使ってください。
filter の blur は要素の描画結果そのものにかかるため、上げると .box の縁や文字まで全体がぼけます。背景だけをぼかしたい場合は backdrop-filter という別プロパティが必要で、これも本ツールの範囲外です。transform は関数の並び順で結果が変わる点にも注意が必要です。回転してから移動するのと、移動してから回転するのとでは位置が変わります。本ツールは translate→rotate→scale→skew の一般的な順序に固定して出力するので、迷わず使えます。
専用ジェネレーターとの使い分け
このツールは「1画面で全体のバランスを素早く決める」入口です。box-shadow は1つ、グラデーションは2色ストップまでに絞っています。多重の影、3色以上のストップ、drop-shadow、transform-origin の指定といった詰めは、専用ジェネレーターの方が向いています。おすすめは、まずこのツールでプリセットを起点に大枠を作り、コピーしたCSSを手元に置いてから、深掘りしたい1プロパティだけを専用ツールで詰めることです。全体像を保ったまま細部を磨けます。