CSS clip-path
ジェネレーター
CSSのclip-pathプロパティをブラウザ上のドラッグ操作で直感的に作成できるジェネレーター。ポリゴン、円形、楕円形など多彩な図形に対応し、コピペですぐに使えるCSSコードを生成します。
エディタ
キャンバスをクリックで頂点追加。ドラッグで移動。右クリックで削除。
プレビュー設定
ホバーアニメーション設定 (オプション)
有効にすると、hover時のclip-path + transitionのCSSが追加出力されます。polygonモードでは頂点数を一致させてください。
エディタで基本状態のシェイプを編集しています。hover状態に切り替えるとhover時の形状を設定できます。
生成コード
CSS clip-path ジェネレーターについて
当ジェネレーターは、CSSのclip-pathプロパティをブラウザ上のドラッグ＆ドロップ操作で直感的に作成できる無料オンラインツールです。
画像の切り抜きや要素のマスキングを行う際、これまでは複雑な座標計算を手動で行うか、画像編集ソフトで透過PNGを書き出す必要がありましたが、このツールを使えば視覚的に図形を作成し、ワンクリックでCSSコードを生成できます。
ポリゴン（多角形）だけでなく、円形（circle）、楕円形（ellipse）、内側余白（inset）などの多様なシェイプに対応し、ホバー時のなめらかなアニメーションコードもサポートしています。
使い方
図形を選ぶ
プリセットから好みの図形を選ぶか、タブからモード（polygon, circle, ellipse, inset）を選択します。
形を整える
キャンバス上の頂点（ノード）をドラッグして、形を細かく調整します。polygonモードではクリックで頂点の追加や削除も可能です。
コードをコピー
プレビューで確認できたら、「生成コード」エリアの「コピー」ボタンを押して、CSSファイルやTailwindのクラスに貼り付けます。
clip-path プロパティ解説
clip-path プロパティで使用できる主なシェイプ関数について解説します。
■ polygon() — 多角形
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
任意の数の頂点座標をカンマ区切りで指定します。値は % またはピクセル（px）で指定可能で、最低3つの頂点が必要です。ホバー時に形を変える transition アニメーションを適用するには、変更前後で頂点数が完全に一致している必要があります。
■ circle() — 円形
clip-path: circle(半径 at 中心X 中心Y)
円の半径と、その中心座標を指定します。中心点の at 以降を省略した場合、要素のど真ん中（50% 50%）が中心として扱われます。
■ ellipse() — 楕円形
clip-path: ellipse(X半径 Y半径 at 中心X 中心Y)
X方向とY方向で異なる半径を指定して楕円を描画します。横長や縦長に切り抜きたいプロフィール画像などで活用できます。
■ inset() — 矩形の内側カット
clip-path: inset(上 右 下 左 round 角丸)
要素の境界線から内側に向かってどれだけ削るか（マージン）を指定します。border-radius と同じ構文で角丸（round）を指定できるため、画像のオーバーレイトリミングや角丸画像を手軽に作成するのに便利です。
よくある質問 (FAQ)
- Q.clip-pathはSEOに影響しますか？
- いいえ。clip-pathは視覚的な表示のみを変更し、HTML構造やテキストコンテンツには影響しません。検索エンジンはクリップされた領域外のテキストも認識し、通常通りインデックスするため、SEOの観点で悪影響を及ぼすことはありません。
- Q.clip-pathとSVG clipPathの違いは何ですか？
- CSSのclip-pathはスタイルシートだけで完結し、polygon()やcircle()等の組み込み関数で記述します。一方、SVGのclipPathはSVG要素を定義してurl(#id)で参照する方式です。CSSの方がHTMLへの適用が簡便ですが、極めて複雑なパスにはSVGが適しています。
- Q.hover時にclip-pathをアニメーションさせることは可能ですか？
- はい、可能です。polygon()同士であれば頂点数が一致している場合に限り、transitionプロパティを用いて滑らかにアニメーションさせることができます。circle()やellipse()、inset()も同様にtransitionでの形状変化に対応しています。
- Q.クリップされた領域外はクリック可能ですか？
- clip-pathでクリップされた領域外の部分は、クリックイベントやホバーイベントなどのポインターイベントが発火しません。これはボタンやリンクなどのインタラクティブな要素を配置する際に意図した通りの動作を保証するためです。
- Q.このツールの使用にセキュリティ上のリスクはありますか？
- いいえ、全くありません。ツール内で画像をアップロードしてプレビューする機能も含め、すべての処理はあなたのブラウザ（クライアント側）内で完結します。画像データや入力内容がサーバーに送信されたり保存されたりすることは一切ないため、安心してご利用いただけます。
活用シーン
ヒーローセクションの斜めカットデザイン
Webサイトのファーストビュー（ヒーローヘッダー）で、背景画像を斜めに切り抜いてダイナミックな印象を与えます。polygon()のプリセットを利用すれば、数秒でコードを生成できます。
ユニークなプロフィール画像の作成
標準的な丸型（border-radius: 50%）ではなく、六角形や星形、波形など、目を引く独自の形でメンバーのアバター画像を切り抜きたい場合に活躍します。
ホバー時のリビール（現れる）アニメーション
画像の初期状態を小さくclip-pathで切り抜いておき、ホバー時に全画面表示になるようなアニメーションを実装する際、本ツールのホバー機能を使って直感的にトランジションを作成できます。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。