CSS clip-path生成CSS Clip Path Generator
写真を載せてclip-pathをプレビュー。プリセット・カスタム多角形・insetに対応。Preview clip-path on your photo. Presets, custom polygons, and inset shapes.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
プレビュー用の背景写真 Background photo for preview
下のプレビューへドラッグ＆ドロップ、またはファイルを選択 Drag & drop onto the preview below, or choose a file
画像はブラウザ内でのみ表示され、サーバーに送信されません。 Images are shown in your browser only and are never sent to a server.
プレビュー上をクリックで頂点追加・ドラッグで移動・頂点ダブルクリックで削除（最低3点） Click preview to add points, drag to move, double-click a point to remove (min. 3 points)
プレビューをドラッグして背景写真の位置を調整できます Drag the preview to reposition the background photo
カスタム多角形モードでは「背景を動かす」をオンにしてからドラッグしてください In custom polygon mode, turn on Move background, then drag
プレビュー上でマウスホイールでも拡大・縮小できます Use the mouse wheel on the preview to zoom in/out
背景写真をここにドロップ Drop background photo here
JPEG / PNG / WebP など JPEG, PNG, WebP, etc.
circle()・ellipse()・polygon()・inset() などの形式で入力してください Enter circle(), ellipse(), polygon(), inset(), etc.
使い方・ユースケース How to Use & Use Cases
プレビュー用の背景写真を、下のプレビューへドラッグ＆ドロップするかファイルを選択して読み込みます。プリセット・カスタム多角形・insetで形状を調整し、CSSをコピーします。 Drag and drop a background photo onto the preview, or choose a file. Adjust the shape with presets, custom polygon, or inset, then copy the CSS.
カスタム多角形モードではプレビュー上をクリックして頂点を追加し、ドラッグで移動・ダブルクリックで削除できます。ヒーロー画像のマスクやカードの切り抜きデザインの確認に使えます。 In custom polygon mode, click the preview to add points, drag to move, and double-click to remove. Great for hero masks and card cutout layouts.
よくある質問FAQ
clip-pathとは何ですか？What is clip-path?
要素の表示領域を円・多角形などの形状で切り抜くCSSプロパティです。border-radiusより複雑な形状（星・矢印など）を作れます。A CSS property that clips an element to a shape such as a circle or polygon. It supports more complex shapes than border-radius (stars, arrows, etc.).
カスタムのclip-pathを試せますか？Can I try a custom clip-path?
はい。下部の入力欄にcircle()・ellipse()・polygon()などの値を直接入力または貼り付けてプレビューできます。Yes. Enter or paste circle(), ellipse(), polygon(), or other clip-path values in the custom input field to preview them.
写真をアップロードしてプレビューできますか？Can I upload a photo to preview?
はい。プレビュー枠へドラッグ＆ドロップするか「ファイルを選ぶ」から背景写真を読み込めます。画像はブラウザ内でのみ表示され、サーバーに送信されません。Yes. Drag and drop onto the preview area or use Choose file. Images stay in your browser and are never sent to a server.
Clippy（bennettfeely.com）と同じことができますか？Is this comparable to Clippy (bennettfeely.com)?
プリセット形状・カスタム多角形（クリックで頂点追加）・inset（角丸付き）・写真プレビューなど、主要機能は同等です。SVG path()の手書き編集やアニメーション用の高度な機能は対象外です。Presets, custom polygons (click to add points), inset with rounding, and photo preview cover the main Clippy workflow. SVG path() editing and advanced animation helpers are not included.
画像にも使えますか？Can I use this on images?
はい。img要素や背景画像のdivにclip-pathを適用できます。切り抜かれた部分は表示されません。Yes. Apply clip-path to img elements or divs with background images. Clipped areas are hidden.
対応ブラウザは？Which browsers are supported?
モダンブラウザ（Chrome・Firefox・Safari・Edge）で利用できます。古いIEには非対応です。Modern browsers (Chrome, Firefox, Safari, Edge). Not supported in legacy IE.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
