CSS clip-path ジェネレーター
無料オンライン CSS clip-path ジェネレーター。頂点をドラッグして polygon・circle・ellipse・inset の形状を作り、ライブプレビューしながら CSS をワンクリックでコピー。
CSS clip-path とは？
clip-path は要素を基本図形やパスに切り抜く CSS プロパティです。図形の外側は非表示になるため、画像を編集しなくても、矩形の画像やボックスを三角形・円・六角形・斜めのバナーや任意の多角形に変換できます。
clip-path はどのブラウザで使えますか？
このジェネレーターが使う基本図形関数 polygon()・circle()・ellipse()・inset() は、Chrome・Edge・Firefox・Safari・Opera など最新のブラウザすべてでサポートされています。-webkit-clip-path のプレフィックスが必要なのは、非常に古いモバイル Safari のみです。
polygon モードの使い方は？
polygon モードでは、プレビュー上の各頂点がドラッグ可能な点として表示されます。点をドラッグして移動し、空きスペースをダブルクリックして新しい頂点を追加、点をクリックして選択してから削除ボタンで削除できます。CSS の値はパーセント座標でリアルタイムに更新されます。
polygon() のパーセントは何を意味しますか？
各頂点は要素の左上を基準にした X Y のパーセント値で表されます。要素サイズに相対的なため、図形は要素に合わせて拡大縮小され、どの画面幅でもレスポンシブに保たれます。
circle・ellipse・inset の違いは？
circle(半径 at x y) は単一半径の円に、ellipse(rx ry at x y) は水平と垂直で異なる半径を持つ楕円に、inset(上 右 下 左) は各辺から内側に縮めた矩形に切り抜きます。このツールはすべてのパラメータにスライダーと数値入力を用意しています。
clip-path はレイアウトやクリックに影響しますか？
clip-path は見た目だけの機能です。要素は元のボックスをレイアウト上に保持するため、周囲は動きません。ただしクリックなどのポインターイベントは切り抜かれた可視領域内でのみ反応するので、独自形状のボタン作成に活用できます。
clip-path はアニメーションできますか？
はい。図形関数と頂点数が一致していれば、ブラウザは 2 つの clip-path 値を滑らかに補間できます。例えば大きい inset から小さい inset へ、同じ頂点数の polygon 同士の変形などです。CSS の transition プロパティでアニメーションできます。
画像やデータはアップロードされますか？
いいえ。プレビュー画像は Canvas 上にローカルで描画したグラデーションで、すべての計算はブラウザ内で完結します。作成した内容がサーバーに送信されることはなく、読み込み後はオフラインでも使えます。
clip-path のよくある使い道は？
斜めのヒーローセクション、六角形や円形のアバターマスク、三角の吹き出し矢印、クリエイティブな写真コラージュ、カードの面取りコーナー、個性的な形のボタンなど、画像編集ソフトなしで幅広く使われています。
CSS clip-path ジェネレーターの使い方
画像を編集せずに、CSS clip-path で任意の要素を自由に成形できます。シェイプ関数を選び、ハンドルをドラッグし、本番でそのまま使える CSS をコピーするだけ。すべてブラウザー内でローカルに動作します。
- モードを選びます：Polygon（多角形）、Circle（円）、Ellipse（楕円）、Inset。
- Polygon モードでは頂点のドットをドラッグ、空白部分をダブルクリックして点を追加、削除する前に点を選択します。
- Circle・Ellipse・Inset モードではスライダーで各値を微調整するか、正確なパーセント値を直接入力します。
- ローカルで生成したグラデーションのサンプル画像の上で、ライブプレビューが更新されるのを確認します。
- 1 行の clip-path ルールをコピーして、スタイルシートに貼り付けるだけで使えます。
2 つの状態で polygon の点の数を揃えておけば、CSS transition で形状をなめらかにアニメーションできます。
関連ツール
- CSS ボックスシャドウ ジェネレーター 無料オンライン CSS box-shadow ジェネレーター。オフセット、ぼかし、広がり、色、内側シャドウを調整して美しいシャドウをビジュアルに作成。ライブプレビューと即座にコードコピー。
- CSSグラデーションジェネレーター ビジュアルに素晴らしいCSSグラデーションを作成。複数のカラーストップ、カスタム角度、位置で線形・放射・円錐グラデーションを生成。本番対応CSSコードを即座にコピー。
- border-radius ジェネレーター 無料オンライン border-radius ジェネレーター。8つのハンドルをドラッグするかblobプリセットを選んで、有機的なCSSシェイプを作成し、コードをすぐにコピーできます。
- カラーコンバーター 無料オンラインカラーコンバーター。HEX、RGB、HSL、HSV形式をビジュアルピッカーで即座に変換。100% プライベート、ブラウザで動作。
- CSS イージング ジェネレーター 無料オンライン CSS イージング ジェネレーター。インタラクティブな曲線上で cubic-bezier の制御点をドラッグし、18 種類のプリセットから選んで、ボールのループ アニメーションで確認しながらタイミング関数を即座にコピー。
- CSS テキストシャドウ ジェネレーター 無料オンライン CSS text-shadow ジェネレーター。オフセット・ぼかし・色・不透明度を設定した複数レイヤーを重ねて、ネオンや 3D、レトロのプリセットを試せます。ライブプレビューで即 CSS コピー。
- CSSビューティファイアー CSSコードを即座にフォーマット・美化します。圧縮されたCSSを読みやすく、適切にインデントされたコードに変換します。カスタマイズ可能なオプション付き。
- CSS圧縮ツール 無料オンラインCSS圧縮ツール。空白、コメント、不要な文字を削除してCSSコードを即座に圧縮・最適化。ファイルサイズを削減し、ウェブパフォーマンスを向上させます。