CSSジェネレーター｜グラデーション・図形

CSS Generator Suite とは？

CSS Generator Suite は、単一のタブ付きインターフェースから15種類の一般的なスタイリング作業向けに、すぐに貼り付けられる CSS および Tailwind 出力を生成するブラウザベースのツールボックスです。box shadow、flexbox 宣言、glassmorphism のルールを手書きしてブラウザをリロードして確認する代わりに、スライダーとドロップダウンを調整するだけでライブプレビューが即座に更新されます。出力は各コントロールパネルのすぐ下に表示され、クリック一発でクリップボードにコピーできます。すべての計算はブラウザ内で完結します。ファイルのアップロードは不要、アカウントも不要で、ページが読み込まれれば オフラインでも動作します。

典型的なユーザーには、shadow スタックを素早くプロトタイプしたいフロントエンド開発者、モーション仕様用に cubic-bezier の値をエクスポートする必要があるデザイナー、そしてリアルタイムでプレビューが変化するのを見ながら CSS プロパティがどのように組み合わさるかを理解したい学習者が含まれます。

主な機能

• レイヤー付き Box Shadow Generator — 独立した複数のシャドウレイヤーを追加できます。各レイヤーには offset-X（−50〜50 px）、offset-Y（−50〜50 px）、blur（0〜100 px）、spread（−50〜50 px）、カラーピッカー、inset トグルが設けられています。生成された box-shadow 宣言はすべてのレイヤーをカンマ区切りの単一の値に結合します。
• Flexbox Layout Builder — flex-direction（row、row-reverse、column、column-reverse）、justify-content（space-evenly を含む6つの値）、align-items（5つの値）、flex-wrap、gap（0〜48 px、4ステップ）を選択できます。4つの番号付きプレースホルダーボックスがレイアウトをライブで示します。
• CSS Grid Template Generator — grid-template-columns と grid-template-rows をワンクリックプリセット（repeat(4, 1fr)、200px 1fr など）付きのフリーテキスト文字列として編集し、gap、align-items、justify-items を制御して最大16個の番号付きグリッドセルをプレビューできます。
• Unit Converter (px / rem / em / %) — 任意の単位で値を入力すると、設定可能なベースフォントサイズ（デフォルト16 px）に対して4つの等価値が即座に再計算されます。任意の結果カードをクリックすると、その値を単位付きでコピーできます。
• Cubic Bezier / Easing Generator — 4つのスライダーで P1X、P1Y、P2X、P2Y を制御します。canvas にはコントロールポイントハンドル付きのベジエ曲線が描画されます。10種類の名前付きプリセット（ease、ease-in-back、ease-out-cubic など）をワンクリックで適用できます。モーションプレビューでは現在の曲線を使ってブロックがトラック上をアニメーションします。
• Clip Path Generator — circle、ellipse、inset、polygon の形状に対応しています。ポリゴンエディタには6つのプリセット（triangle、diamond、pentagon、hexagon、star、arrow）が搭載されています。
• Border Radius Generator — リンクモードまたは角ごとのモード、非対称な角丸のためのオプション8値構文、および6つの形状プリセット（Rounded、Pill、Leaf、Drop、Squircle、Message）があります。
• Triangle Generator — 4方向（up、down、left、right）でサイズと色を調整できる、幅・高さゼロのボーダートリック三角形を生成します。
• Glassmorphism Generator — blur 量、背景の不透明度、背景色、ボーダーの不透明度、ボーダー幅、シャドウ blur、シャドウの不透明度を制御します。プレビューでは複数の円によるグラデーション背景の上にすりガラス調カードが表示されます。
• Fluid Typography / Clamp Generator — 最小フォントサイズ、最大フォントサイズ、最小ビューポート、最大ビューポートを設定します。線形補間の傾きと y 切片を計算して clamp() 値を出力し、任意のプレビューポートの幅での解決済みピクセルサイズを表示します。
• Neumorphism Generator — 4種類の形状（flat、concave、convex、pressed）と、distance、intensity、blur、border radius、size、背景色のコントロールがあります。
• Image Filter Generator — 8つの CSS フィルター関数（brightness、contrast、saturation、hue-rotate、blur、grayscale、sepia、invert）。自分の画像をアップロードするか、内蔵のグラデーションプレースホルダーを使用できます。5つの名前付きプリセット（Vintage、B&W、Warm、Cool、Dramatic）があります。
• Typography Properties Generator — font-size、line-height、letter-spacing、word-spacing、text-transform、text-decoration、font-weight（100〜900）、font-style、text-shadow（X、Y、blur、color）、テキストカラーを設定します。
• 3D Transform Generator — rotateX/Y/Z（±180°）、translateX/Y/Z（±200 px）、perspective（100〜2000 px）、scale のスライダー。perspective、transform、transform-style: preserve-3d を出力します。
• Keyframe Animation Builder — アニメーションに名前を付け、ドロップダウンから CSS プロパティ（transform、opacity、background-color など）を選択し、duration、タイミング関数、繰り返し回数を設定します。カスタムパーセントの位置と値でキーフレームの停止を追加・削除し、アニメーションをライブでプレビューできます。

CSS Generator Suite の使い方

ステップ 1：ジェネレータータブの選択

/developer/css/css-generators でツールを開きます。インターフェースは Box Shadow タブで開きます。タブバーはパネルの全幅にわたり、小さい画面ではラップします。任意のタブをクリックしてジェネレーターを切り替えます。各ジェネレーターの状態は同一セッション中にタブ間を移動しても保持されます。

ステップ 2：コントロールの調整

各ジェネレーターは同じパターンに従います。片側（または上部）にコントロール、コントロールの下にライブプレビュー、下部に CSS 出力ブロックがあります。

Box Shadow ジェネレーターの場合：

• デフォルトのシャドウは offsetX 4 px、offsetY 4 px、blur 8 px、spread 0 px、color #00000040、inset オフで始まります。
• スライダーをドラッグすると、白いプレビューボックスのシャドウが即座に更新されます。
• カラースウォッチをクリックするとブラウザのネイティブカラーピッカーが開きます。コンポーネントは選択した色に自動的に 40（16進数で25%の不透明度）を付加します。
• Inset チェックボックスをオンにすると、シャドウが要素の内側に反転します。
• "Add Shadow" をクリックすると2つ目のレイヤーが追加されます。各レイヤーには専用のコントロール行と削除用のゴミ箱ボタンがあります（最後の1つのレイヤーは削除できません）。

Flexbox ジェネレーターでは、4つの番号付きボックスが現在のアライメントを示します。flex-direction を column、justify-content を space-between に変更すると、位置がリアルタイムで更新されます。

ステップ 3：生成された CSS の確認

CSS 出力ブロックは各ジェネレーターのコントロールの下にモノスペースフォントで表示されます。Box Shadow の形式は：

box-shadow: 4px 4px 8px 0px #00000040, inset 2px 2px 4px 0px #ffffff20;

Unit Converter では、出力はコードブロックではなく4つのクリック可能なカードです。任意のカードをクリックすると、その値（例：1.5rem）がクリップボードに直接コピーされます。

ステップ 4：コピーして貼り付ける

各ジェネレーターの出力カードの右上隅にコピーボタンがあります。クリックすると完全な宣言がクリップボードに書き込まれ、"Copied to clipboard" というトースト通知が表示されます。スタイルシートや Tailwind の設定に直接貼り付けられます。

ステップ 5：Fluid Typography の数式表示の活用

Fluid Typography タブには、傾きと切片を確認・記録できる数式カードが含まれています：

font-size = 16px + (32 - 16) * ((100vw - 320px) / (1200 - 320))
slope = 1.7241vw | intercept = -0.5rem

生成される出力は次のようになります：

font-size: clamp(1.0000rem, -0.5rem + 1.7241vw, 2.0000rem);

実践例

レイヤード・カード・シャドウ

アンビエントライトと直接光をシミュレートするために2つの box shadow レイヤーを使う一般的なデザインパターンです：

1. Box Shadow タブを開きます。
2. Shadow 1 を offsetX 0、offsetY 2 px、blur 4 px、spread 0、color #00000020、inset オフに設定します。
3. "Add Shadow" をクリックします。Shadow 2 を offsetX 0、offsetY 8 px、blur 24 px、spread 0、color #00000014、inset オフに設定します。
4. 結果をコピーします：box-shadow: 0px 2px 4px 0px #00000020, 0px 8px 24px 0px #00000014;

レスポンシブな見出しフォントサイズ

モバイル（320 px ビューポート）で 20 px の見出しをデスクトップ（1440 px）で 48 px にスケールさせる場合：

1. Fluid Typography タブを開きます。
2. 最小フォントサイズを 20、最大を 48、最小ビューポートを 320、最大を 1440 に設定します。
3. プレビュービューポートスライダーをドラッグして中間サイズを確認します。
4. コピー：font-size: clamp(1.25rem, 0.2143rem + 3.2143vw, 3rem);

Glassmorphism カード

暗いグラデーションの上のすりガラス通知カードの場合：

1. Glassmorphism タブを開きます。
2. 背景色を白（#ffffff）、不透明度を15%、blur を16 px、ボーダー不透明度を25%、ボーダー幅を1 px、シャドウblurを32 px、シャドウ不透明度を8%に設定します。
3. 出力には -webkit-backdrop-filter ベンダープレフィックスが自動的に含まれます。

ヒントとベストプラクティス

Box Shadow の inset レイヤーは入力フィールドに奥行きを加えます。 カード上のアウターシャドウと小さな inset シャドウ（inset 0px 2px 4px 0px #0000001a）を組み合わせると、フォームフィールドが凹んで見えます。ジェネレーターでは単一のマルチレイヤー宣言で両方を組み合わせられます。

Fluid Typography ジェネレーターでは、境界でのクランプを確認してください。 プレビュービューポートスライダーは280 px から1920 px まであります。最小・最大ビューポートまでドラッグして、両端でフォントサイズが指定した値に正確に留まることを確認しましょう。clamp() 関数がそれを保証しますが、目で見て確認できると安心です。

Cubic Bezier ジェネレーターでは最初にプリセットを適用しましょう。 10種類の名前付きプリセット（ease-out-back、ease-in-cubic など）が出発点になります。1つ適用してから、P1 と P2 のスライダーで微調整します。canvas は変更のたびに曲線を再描画し、モーションプレビューブロックがアニメーションします。

Unit Converter のベースフォントサイズはデフォルト16 px ですが、ブラウザのルートは異なる場合があります。 プロジェクトで html { font-size: 62.5% }（10 px）を設定している場合は、変換前にベースフォントサイズフィールドを10に変更してください。

Clip Path ポリゴンプリセットはパーセントベースの座標を生成するため、要素のサイズにかかわらず正しくスケールします。star プリセットは10点を使用し、CSS のみで装飾バッジとして機能します。

Keyframe Animation Builder には最低2つのキーフレームが必要です。 残り2フレームになると削除ボタンは無効になります。

よくある問題とトラブルシューティング

Box shadow の色がカラーピッカーで最初の6桁の16進数しか表示されません。 コンポーネントは常に16進数でアルファチャンネルとして 40 を付加します（#rrggbbaa 形式）。ネイティブの <input type="color"> は RGB 部分のみを表示します。これは意図した動作です。アルファは別途25%の不透明度で適用されます。異なる不透明度が必要な場合は、出力をコピーして末尾2桁の16進数を手動で調整してください（例：50%の場合は 80、100%の場合は ff）。

Fluid Typography ジェネレーターが負の intercept 値を生成します。 これは線形方程式の y 切片がゼロを下回る場合に正しい動作です。clamp() の値は引き続き指定した最小/最大の範囲内の値に解決されます。負の intercept は線形補間のアーティファクトであり、バグではありません。

Glassmorphism プレビューが一部のブラウザでベタ塗りに見える場合があります。 CSS の backdrop-filter プロパティはハードウェアアクセラレーションが必要で、すべての環境でサポートされているわけではありません。ジェネレーターは標準プロパティと並んで -webkit-backdrop-filter プレフィックスを出力しますが、ブラウザがプロパティをサポートしていない場合はツール内のプレビューも影響を受けます。

3D Transform プレビューがタブ切り替え時にちらつきます。 プレビュー要素に適用された transition: transform 0.2s がマウント時に再生されます。これはタブのマウントサイクルによる見た目上のアーティファクトで、生成されるコードには影響しません。

Grid Builder のフリーテキスト列入力はどんな文字列も受け付けます。 abc 1fr のような無効な値を入力すると、CSS 出力にその無効な値が含まれ、ライブプレビューはブラウザのデフォルトに静かにフォールバックします。有効な CSS グリッドトラック値（1fr、auto、min-content、max-content、repeat(3, 1fr)、または固定ピクセル/パーセント値）のみを使用してください。

プライバシーとセキュリティ

CSS Generator Suite は完全にブラウザ内で動作します。CSS の値、色の選択、入力データは一切サーバーに送信されません。15個すべてのジェネレーターは純粋な JavaScript を使って出力を計算します。実行時に外部ライブラリは読み込まれません。Image Filter ジェネレーターにアップロードした画像はローカルオブジェクト URL（URL.createObjectURL）として開かれ、ネットワーク上に送信されることはありません。ページが読み込まれれば、ツールは完全にオフラインで動作します。

よくある質問

CSS Generator Suite は無料ですか？ はい、アカウント不要で完全無料です。ページを開いてすぐに生成を始められます。

オフラインでも使えますか？ はい。ブラウザにページが読み込まれると、すべての計算がローカルの JavaScript で実行されるため、インターネット接続なしでもすべてのジェネレーターが機能します。

データは安全ですか？ 入力内容はブラウザから外に出ません。個別の CSS 値に関する analytics はなく、フォームの送信もサーバー処理も一切ありません。

box shadow のレイヤーはいくつまで追加できますか？ インターフェースはシャドウレイヤー数に上限を設けていません。"Add Shadow" をクリックし続けて必要なだけレイヤーを重ねられます。ブラウザは単一の box-shadow 宣言内でカンマ区切りのシャドウ値をいくつでもサポートしていますが、レイヤーが多いと生成される出力がとても長くなります。

Tailwind クラスと vanilla CSS の両方を出力できますか？ 設定の説明といくつかのジェネレーターは Tailwind 出力を参照しています。Unit Converter は Tailwind の設定ファイルに適した生の単位で値をコピーします。他のジェネレーターは標準の CSS プロパティ宣言を出力し、Tailwind の style プロップや @layer ブロックで直接使用できます。

clip-path ジェネレーターの出力を SVG に使えますか？ いいえ。出力は HTML 要素に適用される CSS の clip-path パーセント構文（例：polygon(50% 0%, 100% 100%, 0% 100%)）を使用します。SVG の clipPath 要素は異なる座標系と構文を使用します。

モバイルで cubic bezier の canvas に曲線が表示されません — バグですか？ canvas 要素は HTML5 2D コンテキストを使用してレンダリングされます。一部のモバイルブラウザでは、スクロール可能なオーバーフローコンテナ内の canvas はスクロールイベントが発生するまで正しくレンダリングされない場合があります。ページを少しスクロールして再描画をトリガーしてみるか、bezier タブにはデスクトップブラウザを使用してください。

Border Radius Generator の8値構文オプションとは何ですか？ CSS の border-radius はスラッシュで区切られた4つの値からなる2つ目のオプションのセットを受け付けます：border-radius: TL TR BR BL / TL TR BR BL。最初のセットは各角の水平半径を、2つ目のセットは垂直半径を制御し、楕円形のコーナーを生成します。これにより、標準の4値構文では実現できないオーガニックなブロブ形状が作成できます。

セッション間で設定を保存できますか？ ツールはページのロード間で localStorage に設定を保存しません。ページを開き直すとすべてのジェネレーターがデフォルトにリセットされます。再利用したい組み合わせが見つかったら、CSS 出力をすぐにエディタかスタイルシートにコピーしてください。

Fluid Typography ジェネレーターは min() と max() を使いますか、それとも clamp() ですか？ ジェネレーターは clamp(min, preferred, max) を出力します。preferred 値は線形補間式（intercept + slope * vw）です。これは現代の推奨アプローチで、すべての現行ブラウザでサポートされています。

関連ツール

• CSS Generators — スイート本体。以下の専用ツールでカバーされていないものに。
• Type Scale Generator — 音楽的比率を使った完全なモジュラーtype スケールを構築し、CSS 変数、SCSS 変数、または Tailwind の fontSize 設定ブロックを出力します。
• Glitch Effect Generator — カスタマイズ可能な色、速度、強度でアニメーション CSS グリッチテキストエフェクトを生成します。
• Color Converter — CSS ジェネレーターの入力に使用するために hex、RGB、HSL などのカラーフォーマットを変換します。
• Gradient Generator — ライブプレビュー付きで CSS グラデーション背景を作成します。

CSS Generator Suite を今すぐ試す：CSS Generator Suite