CSS clip-pathジェネレーター

Q: クリップパスとシェイプアウトサイドの違いは何ですか?

clip-path は要素の一部を視覚的に非表示にしますが、shape-outside はフローティング要素の周囲でインライン テキストがどのように折り返されるかを変更するだけです。 どちらも同じ基本的なシェイプ関数を共有しますが、シェイプアウトサイドは要素自体が描画するものには決して触れません。

Q: クリップパスはページのパフォーマンスに悪影響を及ぼしますか?

circle() や polygon() などの単純な形状はレンダリングが安価であり、目に見えるほどの速度低下を引き起こすことはほとんどありません。 複雑な path() シェイプはアニメーション フレームごとに再計算されるため、頻繁にアニメーション化される大きな要素をクリップする場合は、小さな静的な要素をクリップするよりもコストが高くなります。

Q: 背景画像にクリップパスを適用できますか?

はい、ただし選択的ではありません。クリップパスはペイント段階で要素ボックス全体をクリップするため、 あらゆる背景画像、色、境界線が前景と一緒にカットされます。 背景のみをクリップし、テキストやアイコンをそのまま残すには、背景に独自の要素を与えます。

Bogdan Sandu (EN) 著 · 公開 2025 年 6 月 9 日 · 最終更新日 2026 年 9 月 13 日

ポイントを動かして、コードをコピー。このCSS clip-path生成ツールは、ポリゴンを視覚的に編集できるエディターです。プレビュー上のハンドルを動かすと、その下に表示されるclip-pathの値がリアルタイムで更新されます。値はパーセントで出力されるため、適用する要素の大きさに合わせて形状も拡大・縮小されます。

ツールの機能:

ライブプレビュー上でポイントをドラッグして、多角形の形状を変更します。点を右クリックして削除します
18 個のプリセットから開始: 三角形、台形、平行四辺形、ひし形、五角形から八角形、星、十字、メッセージバブル、矢印、山形、プラス円、楕円、角丸長方形
パーセンテージ出力なので、すべての要素サイズで 1 つの値が機能します。
完成した clip-path: …; 宣言をワンクリックでコピーするか、形状をリセットして最初からやり直します。

円、楕円、角丸長方形のプリセットは、circle()、ellipse()、および inset() 値としてコピーされます。手で描くものはすべて polygon() です。 path() モードやピクセル単位のスイッチはありません。ポリゴンで近似できる曲線を超える場合は、さらに下にある SVG ルートが使用されます。

このクリップパスジェネレーターの使用方法

右側のパネルからプリセットを選択するか、デフォルトの形状を維持します
任意の点をドラッグして移動します。点を右クリックして削除し、輪郭を簡略化します。
プレビューで値を確認してください。これは正確な clip-path 宣言であり、すでにパーセンテージで示されています。
[コピー] をクリックし、画像、カード、セクションのルールに貼り付けます。
パーセンテージはプレビューのボックスではなく要素自体のボックスに従うため、実際の要素をいくつかの幅でテストします。

ここで人々が構築する最も一般的なものは、斜めのヒーローカットです。 4 つの点、1 つのエッジが角度を付けられている:

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

このページの残りの部分では、プロパティがポリゴン以外でできること、座標と参照ボックスの動作、生成されたシェイプがライブ後に壊れる傾向がある場所について説明します。

CSS クリップパスジェネレーターとは何ですか?

CSS クリップパスジェネレーターは、座標を手で入力する代わりに、ビジュアルインターフェイスを通じてクリップパス値を構築するブラウザーベースのツールです。

これは、clip-path プロパティ (EN)自体の上に配置されます。このプロパティは、CSS マスキングから取得されます。モジュール (EN)を選択し、選択した形状の外側をすべて非表示にします。

このプロパティは CSS (EN) にネイティブであるため、ジェネレーターの仕事全体は変換であり、ドラッグされたポイントをブラウザがすでに理解できる構文に変換します。

プレーンなコードスニペットとの違いは、フィードバックループです。ハンドルを移動すると、画面上の形状が更新され、それに応じて一致する polygon() または circle() 文字列も更新されます。

コンパイル、個別のプレビュー手順、パーセンテージの推測は必要ありません。

簡単に言うと:

カテゴリ: インタラクティブな形状編集ツール
機能: ドラッグしたポイントをすぐに貼り付けられる CSS に変換します。

クリップパスはどのような基本的なシェイプ関数をサポートしていますか?

5 つの基本的な形状関数は、ジェネレーターが出力できるほぼすべてをカバーします: polygon()、circle()、ellipse()、inset()、および path()。

それぞれが異なる種類の入力を受け取ります。一部のジェネレーターは、機能に応じて編集モードを切り替えます。これはポリゴンを編集し、他の形状をプリセットとして提供します。

path() は、生の SVG (EN) パスデータを受け入れるため、奇妙なものです。

このようにして、ジェネレーターは単純なポリゴンの計算では生成できない曲線を生成できるのです。

/* the same idea in three functions */
.avatar  { clip-path: circle(50% at 50% 50%); }
.card    { clip-path: inset(0 0 0 0 round 16px); }
.badge   { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

形状機能	入力	代表的な形状
polygon()	X/Y 座標ペアのリスト	三角形、星、カスタムカット
circle()	半径と中心点	アバター、バッジ
ellipse()	2つの半径と中心点	ブロブスタイルの作物
inset()	各エッジからのオフセット	長方形の作物、丸いカード
path()	SVGパスデータ文字列	不規則な手描きの形

inset() 関数は、標準の border-radius ジェネレーターとまったく同じ値パターンを使用して、丸い角も受け入れます。

形状関数のリストは増え続けています。 Chrome は、Chrome 135 (EN) で 6 番目のオプション shape() を出荷し、Safari はバージョン 18.4 でこれに続きました。

別の SVG ファイルを必要とせずに、曲線を含む応答性の高い非ポリゴンのアウトラインにクリップします。

クリップパスのリファレンスボックスと座標単位

クリップパスの座標にはいくつかの異なる単位があり、その選択はページのサイズが変更された後の図形の動作に影響します。このジェネレーターはパーセンテージのみを書き込みます。これは、サイズ変更が必要なものに対する適切なデフォルトです。

パーセンテージ値: 要素に合わせてスケールするため、ボックスのサイズが変更されても形状の比率が維持されます。
ピクセル値: 固定されたままになります。バッジの切り抜きなど、決して伸ばさない形状に役立ちます。
ビューポートユニット: 要素ではなくブラウザウィンドウにシェイプを結び付けます。

このビューポート相対オプションは、フルブリードセクションで最も重要です。このセクションでは、形状が親要素ではなくブラウザのビューポート (EN)を追跡する必要があります。

一方、パーセントベースの座標は、切り取られた形状を本物のレスポンシブデザイン (EN)の一部にするものです。ポイントはブレークポイントごとに比例して移動します。

すべての座標は特定の基準ボックスに対しても測定され、選択したボックスによって実際に「0%」が始まる場所が決まります。

目安箱	基準位置	共通使用
ボーダーボックス	境界線の外側の端	ほとんどの要素のデフォルト
パディングボックス	境界線の内側の端	境界線が見えるカード
コンテンツボックス	コンテンツ領域の端	テキストの多いクリップされた要素
フィルボックス / ストロークボックス	SVGオブジェクトの境界ボックス	SVGグラフィックスのクリッピング

座標を調整せずに参照ボックスを切り替えることは、生成されたシェイプがツール内では適切に見えるのに、ライブになるとずれてしまう一般的な理由です。

クリップパスジェネレーターはどのようにシェイプを CSS コードに変換しますか?

点をドラッグすると、ジェネレーターがバックグラウンドでリアルタイムに形状関数を再計算します。

コードは常に最新であるため、ほとんどのツールには個別の「生成」ボタンはありません。

一般的な編集方法:

ライブプレビュー画像上でハンドルをドラッグします
数値入力フィールドを備えたポイントバイポイントエディター
不規則なパスベースの形状をフリーハンドで描画する

形状に満足したら、ツールは 2 つの出力のうちの 1 つを渡します。

ほとんどのジェネレーターは、デフォルトで、スタイルシートに直接貼り付ける準備ができたクリップパス宣言を使用します。

代わりに、生の SVG パスデータをエクスポートします。これは、CSS ルールではなく SVG ドキュメント内にシェイプを構築する場合に便利です。

クリップパスはアニメーションとトランジションでどのように動作しますか?

クリップパスは、他の CSS プロパティと同様に、トランジションルールまたは完全なアニメーションシーケンスを通じてアニメーション化します。

これは、特に 2 つのメカニズムによって駆動されます。1 つは単純な状態変化のトランジション、もう 1 つはマルチステップシーケンスの CSS キーフレーム (EN)です。

ポイントの一致: 両端の座標が同じ数のシェイプがスムーズに変形します。

ポイントの不一致: 2 つの状態間のポイント数が異なると、シェイプがトゥイーンではなくスナップされます。

トランジションをカスタムの三次ベジェイージングカーブと組み合わせるのは、シェイプリビールの機械的な印象を軽減する一般的な方法です。

.card {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 400ms cubic-bezier(.4, 0, .2, 1);
}
.card:hover {
  /* same four points, so the shape tweens instead of snapping */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

どのブラウザがクリップパスをサポートしていますか? サポートしていない場合はどうなりますか?

ブラウザによるクリップパスのサポートはもはや現実的なリスクではなく、数字がそれを裏付けています。

2020 年 1 月から広く利用可能: クリップパスは、MDN (EN) に従って、主要ブラウザ全体でベースラインステータスに達しました。
96% のグローバルサポート: 使用できますか (EN) は、追跡されたブラウザトラフィックの約 96% でクリップパスサポートを追跡します。
2024 年に削除されたプレフィックス: Chrome 24 ～ 54 の使用率が 0.1% に低下し、13 未満の Safari の使用率が 0.05% に低下した後、WordPress コア (EN) は CSS から -webkit-clip-path を削除しました。

このベースラインラベルは、通常のプロジェクトでポリフィルなしで機能を出荷しても安全であることを示すため、重要です。

shape() のような新しい追加機能がエンジン間で追いついているため、クリップパス内のすべての関数が同時に到着したという意味ではありません。

プロパティを完全に無視するブラウザでは、通常、次の 3 つのことが起こります。

要素はクリップされていない状態で、フルサイズと形状でレンダリングされます。
クリップパスはペイントにのみ影響するため、ページ上の他のものは何も壊れません。
シェイプに関連付けられたホバーまたはアニメーションは実行されません

ほとんどのデザインでは、クリップパス宣言の前に無地の背景または境界線のルールを記述するだけで十分なフォールバックになります。また、ブラウザ間の互換性 (EN)テストでギャップを早期に発見するのにも役立ちます。

What Is a CSS clip-path生成ツール Used For?

実際のユースケースのほとんどは、1 回限りの実験ではなく、いくつかの反復可能な設計パターンに分類されます。

長方形のページを分割する斜めのセクションカット
ヘッダーとその下のコンテンツの間の形状の区切り線
製品カードとサムネイル上のホバー表示効果
ポートレートおよびイラスト画像用のブロブまたは有機作物

斜めのカットは、ランディングページ (EN) のヒーローセクションで最も頻繁に使用されます。ここでは、単一の斜めのエッジがイントロと次のコンテンツブロックを分けています。

三角形のカットアウトは、専用の CSS 三角形ジェネレーター (EN) を機能させる同じポリゴン計算に従い、無地のボックスの代わりに写真またはカードの背景に適用されます。

これらはいずれも主流のレイアウト手法ではなく、データがそれを裏付けています。 Chrome 独自の使用状況カウンター (EN)によって追跡された、clip-path は すべての Chrome ページ読み込みの約 0.06% のみに表示されます。

この低い数値は、意図的に視覚的なアクセントを与えるために使用されるツールに適合しており、すべてのサイトに必要なものではありません。

どのクリップパス生成ツールを使用する必要がありますか?

4 つのツールはほぼすべてのワークフローをカバーしており、適切なツールを選択するのは、新規に開始するか、ページ上にすでに存在する図形を編集するかによって異なります。このページのジェネレーターは Clippy と同じスロットにあります: ドラッグハンドル、ポリゴン出力、プリセット、インストールするものは何もありません。

ツール	編集方法	出力	最適な用途
Clippy	プレビュー画像上でハンドルをドラッグする	ポリゴン()文字列	素早く、一回限りの形状
Firefox 開発ツール	ライブ要素のページ上のポイント編集	既存の CSS を適切に更新します	スタイルシートにすでにある形状を微調整する
Figma	フレーム上のベクトル点をドラッグします	コードなし、手動でエクスポート	CSSを書く前のプロトタイピング
CodePen	ライブプレビュー付きの自由形式コード	共有可能なパブリック URL	形状の文書化または共有

開発者 Bennett Feely によって構築された Clippy (EN) は、何もインストールされていない状態で Polygon() 文字列を取得する最もよく知られた方法です。

Firefox のシェイプパスエディタ (EN)の動作は異なります。新しいクリップパス値を最初から生成するのではなく、CSS ルールパネルに既に存在するクリップパス値を編集します。

Chrome には、DevTools に組み込まれたネイティブ同等の機能はありません。最も近いオプションは、2015 年以来更新されていないサードパーティの拡張機能です。

CSS が存在する前にレイアウトをモックアップする場合は、通常、Figma でシェイプを切り取る (EN)ほうが、ブラウザツールで座標を操作するよりも高速です。

2 つの質問により、選択肢がすぐに絞り込まれます。

形状は一度必要ですか、それともレイアウトの変更に合わせて調整し続けますか?
図形は実際のページにすでに存在しますか、それとも空白のキャンバスから始めますか?

CSS マスクや SVG の ClipPath 要素の代わりにクリップパスを使用する必要があるのはどのような場合ですか?

3 つとも要素の一部を非表示にすることができますが、解決する問題は異なります。

クリップパス:

長所: 短くて読みやすい構文を備えたエッジの効いた形状
短所: エッジをフェードさせたり柔らかくしたりすることはできません

CSS マスク:

長所: 単なる形状ではなく、グラデーションと画像ベースの透明度
短所: 広い領域のペイントパフォーマンスに負担がかかる

SVG クリップパス:

長所: 1 つの形状定義が複数の要素にわたって再利用される
短所: スタイルシートではなくマークアップに存在するため、見失いやすい

この比較のグラデーション側はプレーン CSS です。mask-image は他の場所で使用されているものと同じグラデーション構文を使用するため、CSS グラデーションジェネレーター (EN) が値をカバーし、プロパティ名を交換します。

SVGの<clipPath>要素は、それを参照するCSSプロパティよりも前から安定して使われてきました。Baselineでは2015年7月から広く利用可能とされています (EN)。

MDN によって追跡されたブラウザ互換性データ (EN)によると、path() 自体は、clip-path の登場から数年後に登場し、Chrome 88、Firefox 71、Safari 13.1 に登場しました。

CSS クリップパスジェネレーターを使用してシェイプを作成するにはどうすればよいですか?

ワークフローはジェネレーターごとにほとんど変わりません。

開始形状関数を選択します。通常、カスタムカットの場合はpolygon()、単純なクロップの場合はcircle()です。
アウトラインが目的のものと一致するまで、プレビュー上のポイントをドラッグします。
コンテナに合わせてシェイプのサイズを変更する必要がある場合は、座標単位をパーセントに切り替えます (このジェネレータはすでに存在します)。
生成されたクリップパス宣言をスタイルシートにコピーします。
メディアクエリ (EN)を使用して、いくつかの画面幅で形状をテストします。ある幅では正しく見える形状でも、別の幅ではずれてしまう可能性があるためです。

「ツールでは動作したが、私のサイトでは動作しなかった」という苦情のほとんどは 2 つの間違いで説明されます。

実際のページとは異なる要素サイズを使用したプレビューからピクセル座標をコピーする
パーセンテージポイントはブラウザウィンドウ全体ではなく、基準ボックスに対して測定されることを忘れています。

クリップパスが機能しない場合は?

クリップパスは静かに失敗します。何もエラーはスローされません。シェイプがジェネレーターで表示されたとおりに動作しないだけです。

クリックはクリップとともに消える: デフォルトでは、クリップアウトされた領域内ではポインタイベントが送出されないため、図形によって部分的に隠されたボタンはそこでクリックを受信しなくなります (MDN (EN))。
Z インデックスは予期せずシフトする可能性があります。 none 以外のクリップパス値は、不透明度が 1 未満の値の場合と同じように、新しいスタックコンテキストを作成します。これにより、重なっている要素のレイヤーの方法が静かに変更される可能性があります。
サイズ変更は計算を壊します。 パーセンテージ座標はレンダリング時に参照ボックスにロックされます。 CSS ではなく JavaScript を通じてサイズを変更するボックスでは、形状が間違った場所で切り取られたように見える場合があります。

プレビューは 1 要素サイズの単一の静的スナップショットであるため、これらはどれもジェネレーターのプレビューには表示されません。

実際のページ内の形状を複数の幅でテストし、その下に実際のインタラクティブ要素を配置すると、出荷前に 3 つすべてが検出されます。

よくある質問：CSS clip-pathジェネレーター

クリップパスとシェイプアウトサイドの違いは何ですか?

clip-path は要素の一部を視覚的に非表示にしますが、shape-outside はフローティング要素の周囲でインラインテキストがどのように折り返されるかを変更するだけです。

どちらも同じ基本的なシェイプ関数を共有しますが、シェイプアウトサイドは要素自体が描画するものには決して触れません。

クリップパスを CSS 変換と組み合わせることができますか?

はい。クリップパスと変換は独立して適用されるため、要素を拡大縮小、回転、または移動してもクリップは無効になりません。

シェイプは要素の参照ボックスに固定されたままで、適用される変換に応じて移動およびサイズ変更されます。

クリップパスはページのパフォーマンスに悪影響を及ぼしますか?

circle() や polygon() などの単純な形状はレンダリングが安価であり、目に見えるほどの速度低下を引き起こすことはほとんどありません。

複雑な path() シェイプはアニメーションフレームごとに再計算されるため、頻繁にアニメーション化される大きな要素をクリップする場合は、小さな静的な要素をクリップするよりもコストが高くなります。

ブレークポイントをまたいでクリップパスの形状を応答させるにはどうすればよいでしょうか?

パーセンテージ座標は自動的にスケールされますが、アスペクト比がブレークポイント間で急激に変化すると形状が歪む可能性があります。

幅ごとに 1 つのパーセント形状を作成するのではなく、メディアクエリ内に別のクリップパス ルールを記述することで、偶然ではなく意図的に比率が保たれます。

背景画像にクリップパスを適用できますか?

はい、ただし選択的ではありません。クリップパスはペイント段階で要素ボックス全体をクリップするため、あらゆる背景画像、色、境界線が前景と一緒にカットされます。

背景のみをクリップし、テキストやアイコンをそのまま残すには、背景に独自の要素を与えます。

CSS クリップパスジェネレーターで最初に確認すべきことは何ですか?

CSS クリップパスジェネレーターは、その出力が 3 回のチェックに合格した場合にのみ信頼を獲得します。参照ボックスはライブ要素と一致し、座標単位は複数の画面幅に対応し、形状は依然として訪問者が期待する場所でクリックを受け取ることができます。

順序は次のようになります。

最初に基準ボックスを一致させます
2 番目にブラウザのサイズを変更し、パーセンテージのずれを確認します
3 番目に図形をクリックして、重要なものが飲み込まれていないことを確認します

サイズ変更テストの前にクリックテストを実行すると、最初のパスは節約されますが、レイアウトが変わると見た目は正しくても、配置が間違った形状になる危険があります。

この順序は、2026 年 9 月に検証されたブラウザー環境にも当てはまります。新しい基本形状関数がエンジン間の残りのギャップを埋めると、この順序は緩みます。

シェイプが 3 つのチェックすべてに合格したら、それをアニメーション化するのが当然の次のステップです。専用のCSS アニメーションジェネレーター (EN)は、手書きのイージングカーブを使用せずにキーフレームのタイミングを処理します。