グラデも影もガラスも、見ながら作る。無料ツール「CSSジェネレーター」を公開しました。

グラデーションの角度を5度ずつ変えて保存し直す、影のぼかしを数値で当てずっぽうに刻む。CSSの見た目まわりの調整は、コードを書いてブラウザを更新する往復にいちばん時間を食われます。デザイン事務所AMIXは、グラデーション・box-shadow・glassmorphismの3種類のCSSを、プレビューを見ながらスライダーで作れる無料Webツール「CSSジェネレーター」を公開しました。値を動かした瞬間に見た目が変わり、決まったらそのままコピーして貼るだけです。アプリのインストールやアカウント登録は不要で、パソコンでもスマートフォンでも、ブラウザを開けばすぐに使い始められます。

どんなツールか

「CSSジェネレーター」は、Webデザインで使用頻度が高い3種類の装飾、つまりグラデーション、box-shadow（影）、glassmorphism（すりガラス）のCSSを対話的に作るためのツールです。画面上部でモードを選ぶと、その装飾に必要なパラメータだけが並び、下のコード欄には現在の設定がそのままCSSとして出力されます。

コードエディタとブラウザを行き来しながら数値を詰める作業は、慣れていても地味に消耗します。とくに影は「X方向に何px、Y方向に何px、ぼかしはいくら、広がりはマイナス何px」と4つの数値が絡み合うため、1つ変えると全体の印象が変わり、当たりをつけるだけで何往復もします。本ツールはその往復をひとつの画面に閉じ込めます。高さ180pxのプレビュー枠が常に表示され、スライダーを動かすと即座に反映されるので、「気持ちいい値」を目で探せます。

処理はすべてお使いのブラウザ内のJavaScriptで行われ、設定した値が当方のサーバーへ送信・保存されることはありません。出力されるのは標準的なCSSプロパティの組み合わせで、フレームワークやビルド環境に依存しません。生成されたコードは右上の「コピー」ボタンで取得でき、押すとボタンの表示が「コピーしました」に変わります。

3つのモードと調整できる値

画面上部の切り替えは「グラデ」「box-shadow」「ガラス」の3つです。それぞれ、扱う値がはっきり分かれています。

「グラデ」モードでは、まず種類を「線形」「放射」「メッシュ風」から選びます。カラーは3つのカラーピッカーが並び、初期値は紫・緑・オレンジ寄りの3色が入っています。線形を選んだときだけ「角度」のスライダー（0〜360度、5度刻み、初期値135度）が現れ、メッシュ風を選んだときだけ「配置を再生成」ボタンが現れる作りです。線形と放射は1色目と2色目の2色、メッシュ風は3色すべてを使います。

「box-shadow」モードには、「ソフト」「浮き」「くっきり」「ネオン」の4つのプリセットボタンが並びます。調整できる値は「X / Y」（それぞれ-40〜40）、「ぼかし」（0〜80）、「広がり」（-30〜30）、「色 / 濃さ」（カラーピッカーと0〜1の不透明度）、そして「内側の影（inset）」のオン・オフです。初期値はX=0、Y=10、ぼかし25、広がり-6、色は濃紺、濃さ0.25で、いわゆる「下に軽く落ちる影」から始まります。

「ガラス」モードでは、「色 / 透明度」（初期値は白・0.18）、「ぼかし」（0〜30px）、「枠線」（0〜0.8）、「角丸」（0〜40px）の4項目を調整します。プレビューには色とりどりのグラデーション背景と丸いオブジェクトが敷かれ、その上に「Glass」と書かれた半透明のカードが浮かびます。背景が透けて見えることが前提の効果なので、下地ごと確認できるようにしてあります。

主な機能・特徴

3つのモードに、実務で必要になる調整項目を絞って載せています。

• モードは「グラデ」「box-shadow」「ガラス」の3種類。切り替えると、そのモードで意味のあるスライダーだけが表示されるため、関係のない値に迷わされません。
• グラデーションは「線形」「放射」「メッシュ風」の3タイプ。線形は角度指定つき、放射は中心をやや上（50% 35%）に置いた円形、メッシュ風は複数の放射グラデーションを重ねた表現です。
• box-shadowには「ソフト」「浮き」「くっきり」「ネオン」の4プリセット。押すと全スライダーが一括で設定され、そこから微調整できます。ゼロから数値を探すより、近いものを呼び出してから寄せるほうが速く決まります。
• 「内側の影（inset）」のトグルをオンにすると、出力に inset が付いて凹んだ表現になります。入力欄やへこんだボタンの表現に使えます。
• glassmorphismは backdrop-filter を使った実装で、ブラウザ対応のために -webkit- 付きの記述も併記して出力されます。あわせて枠線・角丸・落ち影も1セットで書き出されるため、適用先の背景や要素の配置と組み合わせて、ガラスカードの装飾を作れます。
• スライダーの右には現在値が数値で表示されます。「ぼかし10px」「濃さ0.25」のように、感覚で合わせた設定を数値として記録・共有できます。
• 生成されたコードは常に完成形。右上の「コピー」ボタンで取得でき、押すと「コピーしました」に表示が変わります。
• スマートフォンでも同じ構成で動作します。スライダーはタッチ操作に対応しており、移動中にデザインの当たりをつけることもできます。

使い方

手順は3ステップです。まず画面上部で「グラデ」「box-shadow」「ガラス」のいずれかを選びます。次に、表示されたカラーピッカーとスライダーを動かして、プレビューを見ながら好みの見た目に近づけます。最後にコード欄の右上「コピー」を押し、CSSを対象のセレクタへ貼り付けます。

グラデーションを作るときは、先に色を決めてから角度を振るのが手早いです。カラーピッカーで2色を選び、角度スライダーを0度から360度まで動かすと、同じ色でも「上から下」「斜め」「横」で印象がまるで変わることがわかります。放射に切り替えると中心から広がる形になり、光源のような表現になります。

box-shadowは、まずプリセットを押してしまうのがおすすめです。「ソフト」は控えめに接地した影、「浮き」はY方向に大きく落として持ち上がった印象、「くっきり」はぼかしを0にした版ズレのようなグラフィカルな影、「ネオン」は水色を全方向に散らした発光表現です。近いものを選んでから、ぼかしと濃さを詰めていけば、迷う時間を短くできます。

ガラスは背景が透けることで成り立つ効果なので、プレビューに用意されたカラフルな下地の上で確認してください。このツールで「透明度」と表示される数値は、実装上は色の不透明度（アルファ値）です。値を下げるほど背景が透け、上げるほどカードの色が濃くなるので、文字の読みやすさを確認しながら調整してください。ぼかしを10px前後、透明度を0.15〜0.25あたりに置いたところが扱いやすい範囲です。

メッシュ風グラデーションのしくみ

「メッシュ風」は、いわゆるメッシュグラデーション（複数の色が布のように混ざり合う表現）をCSSだけで近似したものです。仕組みとしては、背景色を1色敷いたうえに、位置をずらした4つの放射グラデーションを重ねています。それぞれのグラデーションは中心が指定色、外側55%あたりで透明になるように設定されているため、重なった部分で色が溶け合い、なめらかなムラが生まれます。

本ツールは background-color と background-image の2つの宣言を出力します。CSSでは背景色と複数の画像をまとめて指定する書き方もありますが、このツールの出力を使うときは両方の宣言をセットで貼り付けてください。

「配置を再生成」ボタンを押すと、4つの放射グラデーションの位置がランダムに振り直されます。同じ3色でも配置が変わるだけで、まったく違う表情になります。狙った形を作り込むタイプの機能ではなく、気に入った配置が出るまで何度か押して探す使い方が向いています。色を先に決めてから配置を回すと、方向性を保ったまま候補を出せます。

glassmorphism を効かせるコツ

すりガラス表現の要は backdrop-filter です。これは「その要素の背後にあるものをぼかす」フィルターなので、背後に何もない場所で使うと何も起きません。真っ白な背景の上に置いても、ぼかす対象がないため単なる半透明の四角に見えてしまいます。うまく効かせるには、写真やグラデーションなど情報量のある下地の上に重ねることが前提になります。

見え方を決める要素は4つのバランスです。「透明度」の数値を下げると下地が透けやすくなり、ぼかしを強くすると下地の輪郭がぼやけます。下地の色や形をどの程度見せたいかに合わせて、この2つを調整してください。

そして忘れやすいのが枠線です。ガラスの縁に細い明るい線を入れると、平面から厚みのある板に見え方が変わります。本ツールは白の枠線の不透明度を0〜0.8で調整できるようにしてあり、初期値は0.30です。数値を0にすると縁が消えて途端に安っぽくなるので、いちど0と0.3を見比べてみてください。出力には落ち影も含まれているため、コピーした状態で「背景が透け、縁が光り、下に影が落ちる」という一式が揃います。

活用シーン

• ボタンやカードの影を、コードを書く前に決めておきたいとき
• ヒーローエリアやセクション背景に使うグラデーションを探したいとき
• メッシュグラデーション風の背景を、画像を使わずCSSだけで用意したいとき
• glassmorphismのカードやナビゲーションを実装したいとき
• 入力欄の凹み表現に、内側の影（inset）の値を詰めたいとき
• デザインカンプの装飾を、実装値に落とし込みたいとき
• クライアントやチームに「この影で」と数値付きで共有したいとき
• CSSの各プロパティが見た目にどう効くのか、動かして確かめたいとき

生成したコードをそのまま採用するだけでなく、「近い値を出してから手で書き換える」下準備としても使えます。数値が目に見える形で残るので、デザイン意図をチームで共有する土台にもなります。

ご利用にあたって

本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。プレビューはツール内の限られた枠の中での表示であり、実際のサイトでは要素の大きさ、重なり順、下地の内容によって見え方が変わります。とくに backdrop-filter を使うガラス表現は、ブラウザの種類・バージョンや端末環境によって対応状況や描画結果が異なる場合があります。最終的な見た目は実機・実ブラウザでご確認ください。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、AMIXは責任を負いかねます。本ツールの仕様・内容は、予告なく変更または提供を終了する場合があります。

見ながら決めて、そのままコピー。グラデーション・影・ガラスの調整にかけていた往復を、まとめて短くできます。ぜひ気軽にお試しください。