clip-path ジェネレーター｜CSSの切り抜き・図形をドラッグで作成（無料）

clip-path は、要素を多角形・円・楕円などの形に切り抜く（クリッピングする）CSSプロパティです。本ツールは clip-path の値をドラッグ操作で作り、そのままコピーできる無料のジェネレーターです。登録不要・透かしなしで、生成したコードは商用利用できます。

clip-path とは

clip-path は、要素の表示領域を指定した形状で切り抜くプロパティです。polygon()（多角形）、circle()（円）、ellipse()（楕円）、inset()（角丸つきの矩形）などの基本図形を指定できます。画像のマスク、斜めに区切ったセクション、吹き出し、矢印、リボンなどを画像編集なしでCSSだけで実現できます。

使い方（3ステップ）

形状タイプ（多角形／円／楕円／inset）を選びます。多角形なら「定番の形」から選ぶと早いです。
プレビュー上の頂点をドラッグして微調整します。ダブルクリックで頂点を追加、頂点をダブルクリックで削除できます。
「コードをコピー」で clip-path と -webkit-clip-path 付きのCSSを取得し、対象の要素に貼り付けます。

基本図形の書き方

関数	用途	例
`polygon()`	三角形・六角形・矢印など自由な多角形	`polygon(50% 0, 0 100%, 100% 100%)`
`circle()`	正円で切り抜く（アイコン等）	`circle(50% at 50% 50%)`
`ellipse()`	横長・縦長の楕円	`ellipse(50% 35% at 50% 50%)`
`inset()`	内側に余白をとった矩形（角丸可）	`inset(10% round 12px)`

用途別プリセット

「この形のコードがすぐ欲しい」という用途別のプリセットを用意しています。各ページに実物プレビューとコピペコードがあります。

よくある失敗・注意点

古いブラウザ対応：-webkit-clip-path を併記すると安全です（本ツールは自動で併記します）。
アニメーション：polygon どうしを transition でなめらかに変化させるには、頂点の数を揃える必要があります。
はみ出し：切り抜きで影（box-shadow）も一緒に切れてしまいます。影を付けたいときは親要素に filter: drop-shadow() を使います。

よくある質問

clip-path ジェネレーターは無料ですか？

はい。完全無料で、登録も透かしもありません。生成したコードはそのまま商用利用できます。

-webkit-clip-path は必要ですか？

古いSafariやChromeへの互換性のために併記が安全です。本ツールは clip-path と -webkit-clip-path の両方を自動で出力します。

頂点（点）の数は増やせますか？

はい。プレビュー上をダブルクリックすると最も近い辺に頂点を追加でき、頂点をダブルクリックすると削除できます（最小3点）。

clip-path はアニメーションできますか？

できます。頂点の数が同じ polygon どうしなら transition でなめらかに変化します。「ホバーで変化」を有効にすると、transition とホバー時のコードを出力します。

対応ブラウザは？

clip-path はChrome・Safari・Edge・Firefoxなど主要ブラウザで利用できます。基本図形（polygon/circle/ellipse/inset）は広くサポートされています。

clip-path ジェネレーター

生成されたCSS