clip-path ジェネレーターとは、CSSのclip-pathプロパティの値を、図形をドラッグするだけで作れる無料ツールです。三角形や星、吹き出しといった図形を画面上で動かしながら、そのまま貼り付けられるCSSコードを生成できます。値を手で書く必要はありません。
clip-pathは要素を好きな図形に切り抜ける強力なプロパティですが、polygon(50% 0%, 0% 100%, 100% 100%)のような座標の羅列を手で書くのは骨が折れます。1点ずらすたびにブラウザを確認して……という作業は、現実的ではありません。
この記事では、CodeQuestが公開しているclip-path ジェネレーターの使い方を解説します。多角形・円・楕円・insetの4モード、定番20形状のワンクリック呼び出し、他のツールではあまり見かけないストライプ／チェック柄のスライダー調整、-webkit-付きコードの自動出力まで、実際の操作に沿って紹介します。ブラウザだけで完結し、登録は不要です。
clip-path とは：CSSで要素を図形に切り抜くプロパティ
clip-pathとは、要素の表示領域を指定した図形の内側だけに切り抜くCSSプロパティです。切り抜かれた外側は描画されず、背後の要素が透けて見えます。画像を六角形にトリミングしたり、セクションの背景を斜めに区切ったりといった表現を、画像編集ソフトを使わずCSSだけで実現できます。
値の指定には、おもに次の4つの基本図形（basic shape）を使います。
| 関数 | 作れる形 | 値の例 |
|---|---|---|
polygon() | 多角形（頂点を自由に指定） | polygon(50% 0%, 0% 100%, 100% 100%) |
circle() | 円 | circle(50% at 50% 50%) |
ellipse() | 楕円 | ellipse(50% 35% at 50% 50%) |
inset() | 四辺を内側に詰めた矩形（角丸可） | inset(10% 10% 10% 10% round 8%) |
数値はすべて要素の幅・高さに対する割合（%）で、左上が原点です。考え方はシンプルですが、複雑な図形ほど頂点が増え、手書きでの調整は急に難しくなります。各プロパティの詳細仕様はMDNのclip-pathリファレンス も参考になります。
このツールでできること
clip-path ジェネレーターは、座標を一切書かずに図形を作ることに特化したツールです。主な機能は次のとおりです。
| 機能 | 内容 |
|---|---|
| 4つの図形モード | polygon（多角形）／circle（円）／ellipse（楕円）／inset（角丸矩形）を切り替え |
| ドラッグ編集 | 多角形の頂点をマウスでつかんで移動。ダブルクリックで頂点の追加・削除 |
| 正多角形スライダー | 3〜12角形を1本のスライダーで連続的に変化 |
| 定番20形状 | 三角形・星・吹き出し・矢印などをワンクリックで呼び出し |
| ストライプ／チェック | 本数・マス数をスライダーで可変。他ツールでは珍しい縞・市松模様に対応 |
| 左右／上下の反転 | 作った図形をワンクリックで反転 |
| ホバーで変化 | 有効にするとtransitionとホバー時のコードを自動付与 |
| 背景画像で確認 | 手元の画像をアップロードして、実際の切り抜き結果をプレビュー |
| -webkit- 自動併記 | clip-pathと-webkit-clip-pathを両方出力してコピー |
サーバーに画像やデータを送信せず、すべてブラウザ内で完結します。生成したコードはそのまま商用利用できます。
使い方：3ステップでコードを作る
操作はおおきく3ステップです。難しい設定はありません。
- 形を選ぶ： 上部で図形モード（多角形・円・楕円・inset）を選び、多角形なら定番形状やスライダーでベースの形を決めます。
- ドラッグで調整： プレビュー上の頂点をドラッグして微調整します。多角形はプレビューのダブルクリックで頂点を追加、頂点のダブルクリックで削除できます。円・楕円・insetはスライダーで半径や四辺を調整します。
- コードをコピー： 下部に生成された
clip-pathのCSSが表示されるので、コピーボタンを押して貼り付けるだけです。
背景画像をアップロードすれば、実際に切り抜きたい写真の上で形を合わせられます。アスペクト比の切り替えもできるので、配置先の要素に近い縦横比で確認すると失敗が減ります。
多角形モード：ドラッグと頂点編集が主役
もっとも使うのが多角形（polygon）モードです。プレビューに表示された丸いハンドルが各頂点に対応していて、これをドラッグするとリアルタイムに形が変わり、コードも即座に更新されます。
頂点の数はあとから変えられます。プレビューの辺の近くをダブルクリックすると、その辺上に頂点が1つ追加されます。逆に頂点をダブルクリックすると削除されます（最小3点まで）。複雑な形を作りたいときは、近い形のプリセットから始めて頂点を足していくのが近道です。
「正多角形スライダー」を動かすと、三角形から十二角形まで角数が連続的に変化します。きれいな多角形が欲しいだけなら、これを動かすのが最速です。生成されるコードは次のような形になります。
.clip-path {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}座標が%表記になっているため、要素のサイズが変わっても比率を保って切り抜かれます。レスポンシブでもそのまま使えるのが、この方式の利点です。
定番20形状をワンクリックで呼び出す
よく使う形は、ボタン1つで呼び出せるプリセットとして用意しています。呼び出したあとも頂点をドラッグして自由に調整できます。
- 基本図形： 三角形・台形・平行四辺形・ひし形・五角形・ベベル
- 矢印・記号： 右矢印・左矢印・右ポイント・左ポイント・シェブロン・十字
- 装飾： 星・六芒星・バースト（トゲ）・吹き出し・フレーム
- パターン： 横ストライプ・縦ストライプ・チェック（市松）
このうちストライプとチェック柄は、clip-path系のジェネレーターでもあまり見かけない形です。本ツールでは縞の本数や市松のマス数を専用スライダーで増減でき、1本のclip-pathで縞模様や市松模様を切り抜けます。星型の「バースト」もトゲの数をスライダーで5〜20本まで変えられるので、装飾の幅が広がります。
六角形を画像トリミングに使う具体例は、ハニカムレイアウトをCSSで実装する記事 でも実装の流れを解説しています。
円・楕円・insetモード：スライダーで角丸切り抜き
多角形以外の3モードは、頂点ではなくスライダーで形を決めます。直線の頂点では作れない、なめらかな曲線の切り抜きはこちらの担当です。
| モード | 調整できる項目 | 主な用途 |
|---|---|---|
| circle（円） | 半径・中心のX/Y | 円形のアイコン・アバターのトリミング |
| ellipse（楕円） | 横半径・縦半径・中心のX/Y | 横長/縦長の楕円マスク |
| inset（矩形） | 上下左右の詰め幅・角丸（round） | 角丸の窓抜き・余白を詰めた矩形マスク |
とくにinset()のroundは、border-radiusに似た角丸を切り抜きに付けられます。overflow: hiddenとborder-radiusの組み合わせが使いにくい場面で、要素そのものを角丸にマスクしたいときに便利です。
-webkit-clip-path が自動で併記される理由
結論から言うと、古いブラウザでの表示崩れを防ぐためです。本ツールはclip-pathと-webkit-clip-pathを必ずセットで出力します。
clip-pathはCan I useの対応状況のとおり主要ブラウザで広くサポートされていますが、一部の古いSafariやChromeでは-webkit-プレフィックス付きでないと効かないケースがありました。両方を書いておけば、新しいブラウザはプレフィックスなしを、古いブラウザはプレフィックス付きを解釈するため、取りこぼしがありません。
.clip-path {
/* 新しいブラウザはこちらを解釈 */
clip-path: circle(50% at 50% 50%);
/* 古いWebKit系のための保険として併記 */
-webkit-clip-path: circle(50% at 50% 50%);
}手書きだと-webkit-側の書き換えを忘れがちですが、ツールが両方を同期して出力するので、コピーするだけで対応が済みます。
ホバーでなめらかに変化させる
「ホバーで変化」を有効にすると、transitionとホバー時のコードが追加で出力されます。マウスを乗せると切り抜きが解除されて全体が現れる、といった演出をコピペで作れます。
.clip-path {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
transition: clip-path 0.4s ease, -webkit-clip-path 0.4s ease;
}
/* ホバーで全体を表示 */
.clip-path:hover {
clip-path: inset(0);
-webkit-clip-path: inset(0);
}ここで重要なのが、多角形どうしをアニメーションさせるなら頂点の数を揃えることです。polygon()のトランジションは頂点を1対1で補間するため、頂点数が違うとなめらかに動かず、形が飛んでしまいます。本ツールならダブルクリックで頂点を足して数を合わせられます。
スクロール量に連動して切り抜きを広げる、より動的な演出はclip-pathスクロールアニメーションの実装ガイド で実装手順を解説しています。
用途別プリセットページから探す
「この形のコードがすぐ欲しい」というときは、用途別のプリセットページが便利です。各ページに実物プレビューとコピペ用のコードがまとまっています。ジェネレーター本体で一から作らなくても、目的の形に直行できます。
- 斜めセクション — 背景を斜めに区切る
- 吹き出し — しっぽ付きの吹き出し
- 六角形 — ハニカム・アイコン枠
- 矢印 — 右向き・左向きの矢印
- リボン — 帯・リボン状の見出し
- 三角形・星・丸く切り抜き — 定番の図形
よくある失敗・注意点
clip-pathでつまずきやすいポイントを3つにまとめます。
- 影（box-shadow）が一緒に切れる： 切り抜くと要素に付けた
box-shadowも切り取られて見えなくなります。影を残したいときは、子要素を切り抜き、親要素にfilter: drop-shadow()を使います。 - アニメーションでカクつく： 多角形どうしのトランジションは頂点数が一致していないと破綻します。アニメ前後で頂点の数を揃えてください。
- 古いブラウザで効かない：
-webkit-clip-pathの併記を忘れているのが原因のことが多いです。本ツールは自動で併記するので、コピーしたコードをそのまま使えば回避できます。
clip-path以外のCSS切り抜きや図形表現を横断的に知りたい場合は、CSS実装テクニック集 も合わせてどうぞ。
よくある質問（FAQ）
Q. clip-path ジェネレーターは無料ですか？
はい。完全無料で、登録も透かしもありません。生成したコードはそのまま商用サイトでも利用できます。画像やデータはサーバーに送信されず、すべてブラウザ内で処理されます。
Q. -webkit-clip-path は書く必要がありますか？
古いSafariやChromeとの互換性のために併記が安全です。本ツールはclip-pathと-webkit-clip-pathの両方を自動で出力するので、コピーしたコードをそのまま貼れば対応が済みます。
Q. 頂点（点）の数は増やせますか？
はい。プレビュー上をダブルクリックすると、最も近い辺に頂点が追加されます。頂点自体をダブルクリックすると削除できます（最小3点まで）。複雑な図形は、近いプリセットから始めて頂点を足すのがおすすめです。
Q. clip-path はアニメーションできますか？
できます。頂点の数が同じpolygon()どうしなら、transitionでなめらかに変化します。本ツールの「ホバーで変化」を有効にすると、transitionとホバー時のコードが自動で出力されます。
Q. レスポンシブでも崩れませんか？
崩れにくい設計です。生成される座標はすべて%表記のため、要素の幅や高さが変わっても比率を保って切り抜かれます。固定pxではなく割合で指定されるので、画面サイズに追従します。
Q. 対応ブラウザは？
clip-pathはChrome・Safari・Edge・Firefoxなど主要ブラウザで利用できます。基本図形（polygon／circle／ellipse／inset）は広くサポートされており、-webkit-併記で古い環境への保険もかけられます。
まとめ
clip-pathは要素を図形に切り抜くCSSプロパティ。値の手書きは大変なので、ジェネレーターで作るのが現実的- 本ツールは多角形・円・楕円・insetの4モードに対応。多角形はハンドルをドラッグして直感的に編集できる
- 定番20形状をワンクリックで呼び出せ、ストライプ・チェック・バーストは本数やトゲ数をスライダーで調整できる
-webkit-clip-pathを自動併記。コピーしたコードをそのまま貼るだけで互換性を確保できる- ブラウザ完結・登録不要で、生成コードは商用利用も可能
座標を手で書いていた切り抜き作業は、ドラッグとコピーで一気に短縮できます。まずは定番形状を呼び出して、頂点を動かすところから試してみてください。
作ったデザインを公開したあとは、検索エンジンに正しく見つけてもらう番です。CodeQuest.work SEOの無料診断で、サイトの構造化データや表示速度をチェックできます。
関連記事
クリップパススクロールアニメーション｜スクロール量に応じて拡大するClip-Pathアニメーション実装ガイド
