CSS クリップパスジェネレーター

このツールは、円・楕円・三角形・五角形・六角形・星・角丸長方形といった形状プリセットからCSSのclip-path値を生成し、CSSをコピーする前にプレビューボックスで切り抜き形状をライブ表示します。よくある形状のためにpolygon()の座標を手計算する必要はありません。

このツールとは？

clip-pathは、要素の定義された領域の外側をすべて隠し、内側の形状だけを見えるようにするCSSプロパティです——要素のボックス自体はレイアウト上は残っており、単に描画されないだけです。circle()、ellipse()、inset()といった基本的な形状関数を受け付け、そのうちpolygon()は任意のx/y座標のペアのリストを受け取り、直線的な輪郭を持つ任意の形状を定義できます。

polygon()の座標は手書きするうえで最も難しい部分です——五角形、六角形、星形はそれぞれ複数の点を正確に配置する必要があり、1つでも間違えると形状全体が崩れます。このツールは形状プリセットからそれらの座標を自動計算し、ライブプレビューを即座に更新し、コピーするための正確なclip-path CSSを提供します。

出典: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — clip-pathとその基本形状関数を定義する仕様。

なぜこれを使うのか？

ライブプレビューは実際のプレビューボックスを選択した形状に切り抜くため、座標から想像するのではなく実際の結果を確認できます。
円、楕円、三角形、五角形、六角形、星、角丸長方形という7つの形状プリセットが、polygon()の点を手書きすることなくclip-pathの大半のユースケースをカバーします。
円・楕円・角丸長方形のプリセットにはサイズ/丸みのスライダーが含まれており、座標を編集せずに形状を微調整できます。
どの要素にも貼り付け可能な標準のclip-path CSSを出力します。
すべてブラウザ内で完結——設定した内容はどこにもアップロードされません。無料、登録不要、モバイルでも動作します。

使い方

ドロップダウンから形状を選びます——円、楕円、三角形、五角形、六角形、星、角丸長方形。
円・楕円・角丸長方形の場合、サイズ/丸みのスライダーを調整して切り抜きを微調整します。
形状やスライダーを変更するたびに、プレビューボックスがライブで更新される様子を確認します。
生成されたclip-path CSSをコピーし、切り抜きたい要素に貼り付けます。
単色ではなく画像に適用する場合は、同じclip-pathプロパティを<img>タグまたはbackground-imageを持つ要素に適用します。

例

入力

形状: 六角形

出力

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

正六角形の切り抜きで、バッジ風のプロフィール写真や機能アイコンによく使われます。

基本図形 vs polygon()

円、楕円、inset（角丸長方形）はCSSに組み込まれた基本的な形状関数で、独自のシンプルな構文（半径1〜2個に加え、任意の中心位置やコーナー丸め）を持ちます。三角形、五角形、六角形、星形は組み込みの形状ではなく、いずれもpolygon()——形状の輪郭をたどるx/y座標ペアのフラットなリスト——で表現されます。このツールは、規則的な（均等に配置された）多角形と五芒星について、これらの座標を自動的に計算します。これは手作業で正しく行うのが面倒な部分です。

よくあるclip-pathのパターン

円形アバターまたはバッジ：中程度の半径のcircle()で、円が楕円に引き伸ばされないよう、正方形の元画像と組み合わせることが多い。
角度付きのセクション区切り：全幅セクションの上端または下端を斜めにするカスタムポリゴン（ここにはプリセットとして含まれていません）で、長方形ではないページの区切りを作る。
星型の評価アイコンやバッジ形状：シンプルなケースでは手描きSVGの代わりに装飾形状として便利な星プリセット。
六角形の写真グリッド：ハニカムレイアウトに並べた六角形切り抜き画像で、ポートフォリオやチームページでよく使われるパターン。
子要素のはみ出し部分も一緒に切り取りたい場合の、border-radiusに代わる軽量な代替としての角丸長方形。border-radiusだけでは追加のoverflow:hiddenなしに子要素を切り取れないため。

他のCSSツールとの組み合わせ

clip-pathは切り抜かれる背景としてCSSグラデーションと組み合わされることが多く、あるいはラップする要素にbox-shadowを適用する形で使われます（clip-pathは要素自身の影も切り抜いてしまうため、切り抜かれた形状がそれでも浮いているように見せたい場合、親要素に影をつけるのが一般的な回避策です）。

→ CSS グラデーションジェネレーター · Border Radius ジェネレーター · Box Shadow ジェネレーター

よくある質問

clip-pathは要素のレイアウトサイズに影響しますか？

いいえ——レイアウト上、要素は元のボックスサイズと位置を維持します。clip-pathは描画される内容だけを変更します。周囲の要素は切り抜きが適用されていないかのように配置されるため、切り抜かれた形状がサイズ変更された要素のように振る舞うと期待していると驚くかもしれません。

切り抜いた形状にbox-shadowが表示されないのはなぜですか？

clip-pathは要素の描画全体（それが落とす影も含めて）を切り抜くため、円や多角形で切り抜かれた要素自身のbox-shadowは切り抜きの境界で切れてしまいます。見える形状に沿った影を得るには、切り抜かれていないラップ用の要素にbox-shadowを適用してください。

clip-pathの形状をアニメーションやトランジションさせられますか？

はい、ただし同じタイプで同じ数の点を持つ2つのclip-path値の間だけです——例えば、6点のpolygon()から別の6点のpolygon()への遷移です。根本的に異なる形状間（circle()からpolygon()へなど）のトランジションは、一般的にブラウザ間で滑らかにアニメーションしません。

clip-pathは要素のコンテンツだけでなく背景画像にも使えますか？

clip-pathは背景だけを対象とするのではなく、background-image、background-color、ボーダー、コンテンツを含む要素全体を切り抜きます。背景画像だけを切り抜き、他のコンテンツは切り抜かずに残したい場合は、背景だけを持つ別の要素にclip-pathを適用してください。

clip-pathはすべてのモダンブラウザでサポートされていますか？

はい——MDNの互換性データによると、基本図形関数（circle、ellipse、inset、polygon）を使ったclip-pathは2020年1月以降、主要ブラウザでBaseline（広く利用可能）となっています。現行のブラウザバージョンであれば、フォールバックなしで本番環境で使用しても一般的に安全です。