クリップパスを
直感的に作成・即コピー

ドラッグ操作でclip-pathのCSSコードを生成できる無料ツールです。
polygon（多角形）・circle（円形）・ellipse（楕円形）・inset（内側）の4形状に対応。プレビュー画像を確認しながら作成できます。

無料で使える角を丸くできるドラッグで直感編集プレビュー画像対応コピペですぐ使える

ナズナができること

ドラッグ操作だけでclip-pathを作成し、CSSコードをコピペですぐ使えます。

✦

4つの形状に対応

polygon（多角形）・circle（円形）・ellipse（楕円形）・inset（内側）の4形状をサポート。多角形は豊富なプリセットから選択できます。

⬡

ドラッグで直感編集

エディタ上の点をドラッグするだけで形状を調整。辺をクリックして点を追加、不要な点は削除できます。頂点の丸みも調整可能。

🖼

プレビュー画像対応

画像をアップロードまたはURLで指定して、実際の見た目を確認しながら作成。3種のサンプル背景も用意しています。

🫧

いびつな形を作成

circle（円形）・ellipse（楕円形）ではランダムな頂点数・丸みで水滴や水たまり風のいびつな形をワンクリックで生成できます。

こんな場面でナズナが活躍します。

三角形や六角形などで画像を切り抜いてデザインにアクセントを加えたいとき、コードをすぐに生成してCSSに貼り付けられます。

circle（円形）・ellipse（楕円形）でオリジナルな形状のアバターを作成。いびつな形生成で個性的な形にすることも可能です。

polygon（多角形）・inset（内側）で背景セクションに動きのある形状を設定。プリセットから選んで微調整するだけで素早く完成します。

いびつな形を作成ボタンで自然な曲線の形状をワンクリックで生成。サムネイルや装飾パーツにすぐ使えます。

この機能はチョクモのスタッフがソースコードの記述や、デザイン・イラストの制作は行わず、ほぼ全てをAIを活用して開発しています。ここまでに費やしたコストは約13,759円円です。