CSS Clip-path ジェネレーター

頂点をドラッグするだけで多角形・円・楕円・inset の clip-path を直感編集。
20プリセット形状＋ホバーアニメーション＋SVG <clipPath> 互換出力対応。

🖼️ プレビュー

CLIP

ホバーで変形外枠表示グラデ写真テキスト単色

✏️ ビジュアル編集グリッドにスナップ

頂点をドラッグ／+ボタンで追加

🔷 形状タイプ

⭐ プリセット形状

📋 CSS コード

CSS — clip-path

SVG — <clipPath> 互換

🕒 履歴

まだ履歴はありません

📚 clip-path とは

要素の表示領域を任意の図形で切り抜く CSS プロパティ。polygon() は頂点の集合、circle(r at cx cy) は円、ellipse(rx ry at cx cy) は楕円、inset(top right bottom left round r) は四角形＋角丸を表す。値は % または px。 Safari は -webkit- プレフィックスが必要な場面があるが、現行版は不要。古いブラウザ向けには SVG <clipPath> を併用する。ホバーアニメーションは transition: clip-path を当てるだけで動く（同シェイプ＆同頂点数の場合）。