CSS clip-path ジェネレーター｜ドラッグ操作＆プリセットで直感的に作成

CSS clip-path ジェネレーターとは

本ツールは、CSS clip-path プロパティをビジュアルエディタで直感的に作成できる無料オンラインツールです。コマンドライン操作やコーディング不要で、ドラッグ操作だけで複雑な図形クリッピングを作成できます。

対応しているシェイプ関数:

• polygon() — 多角形（ノードをドラッグで配置・移動）
• circle() — 円形（半径と中心点を指定）
• ellipse() — 楕円形（X/Y半径と中心点を指定）
• inset() — 矩形の内側カット（上下左右のマージン＋角丸）

25種類以上のプリセットから選んでカスタマイズしたり、hover時のアニメーション効果を含むCSSコードを生成したりできます。完全にブラウザ内で動作し、入力データがサーバーに送信されることはありません。

使い方 — 3ステップ

ステップ1: プリセットを選ぶ or モードを選択

ページ上部のプリセットギャラリーから好みの図形をクリックするか、エディタのモードタブ（polygon / circle / ellipse / inset）を選択します。

ステップ2: ドラッグで編集

キャンバス上のノードをドラッグして図形を調整します。polygonモードでは、キャンバスをクリックしてノードを追加したり、右クリックで削除したりできます。スナップ機能をONにすると5%刻みで正確に配置できます。

ステップ3: コードをコピー

「生成コード」セクションに表示されるCSSコードを「📋 コピー」ボタンでクリップボードにコピーし、あなたのCSSファイルに貼り付けてください。

オプション: 画像プレビュー

「プレビュー設定」から自分の画像をアップロードすると、実際のクリッピング効果を確認できます。

clip-path プロパティ完全ガイド

polygon() — 多角形

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)

任意の数の頂点座標をカンマ区切りで指定します。値は % またはピクセルで指定可能。最低3点必要です。hover時のtransitionは頂点数が一致している場合のみ有効です。

circle() — 円形

clip-path: circle(半径 at 中心X 中心Y)

半径は % またはピクセル。closest-side / farthest-side も使用可能。中心点の at を省略すると要素の中央になります。

ellipse() — 楕円形

clip-path: ellipse(X半径 Y半径 at 中心X 中心Y)

X方向とY方向で異なる半径を指定できます。プロフィール画像の楕円クロップなどに活用できます。

inset() — 矩形内側カット

clip-path: inset(上 右 下 左 round 角丸)

border-radius と同じ構文で角丸を指定可能。画像のオーバーレイトリミングに便利です。

ブラウザ対応状況

関数	Chrome	Firefox	Safari	Edge
polygon()	55+	54+	13.1+	79+
circle()	55+	54+	13.1+	79+
ellipse()	55+	54+	13.1+	79+
inset()	55+	54+	13.1+	79+
path()	88+	97+	17+	88+

よくある質問（FAQ）

clip-pathはSEOに影響しますか？

いいえ。clip-pathは視覚的な表示のみを変更し、HTML構造やテキストコンテンツには影響しません。検索エンジンはクリップされた領域外のテキストも認識します。

clip-pathとSVG clipPathの違いは？

CSS clip-path はスタイルシートだけで完結し、polygon() や circle() 等の関数で記述します。SVG <clipPath> はSVG要素を定義して url(#id) で参照する方式です。CSSの方が簡便ですが、複雑なパスにはSVGが適しています。

hover時にclip-pathをアニメーションできますか？

はい。polygon() 同士で頂点数が一致していれば、transition で滑らかにアニメーションします。circle() や ellipse() もtransition可能です。本ツールではhoverアニメーション用のCSSコードも自動生成できます。

クリップされた領域外はクリックできますか？

クリップされた領域外の部分はクリックイベントが発火しません。これはボタンやリンクの配置に影響する可能性があるため、インタラクティブ要素には注意が必要です。

このツールは安全ですか？

はい。アップロードされた画像を含め、すべての処理がブラウザ内で完結します。サーバーへのデータ送信は一切行いません。

clip-path の活用シーン

ヒーローセクション

ページ上部の大きな画像を斜めカットや波形でクリッピングし、モダンなファーストビューを演出します。polygon() の斜めカットプリセットが最適です。

プロフィール画像

circle() で丸型、polygon() で六角形など、通常の border-radius では難しい図形でアバターを表示できます。

カードUI

カード上部にゆるい波形のクリッピングを適用して、画像とテキストの境界をなめらかに見せます。

セクション区切り

ページの各セクション境界に斜めカットや曲線を適用し、スクロール時のビジュアルに変化を加えます。

スクロールアニメーション

JavaScriptでスクロール量に応じて clip-path の値を動的に変更し、画像が徐々に現れるリビール効果を実現します。