CSS clip-pathジェネレーター

CSS で画像やカードを大胆な形に切り抜きたいとき、clip-path は非常に強力なプロパティです。しかし数値を手打ちで調整するのは意外と面倒で、polygon の各点、circle の中心と半径、ellipse の横半径と縦半径、inset の余白と角丸など、少し値が変わるだけで見え方が大きく変わるため、実験と確認を何度も往復することになります。

このジェネレーターは、4 種類の形状を切り替えながらパラメータを JSON で編集し、リアルタイムプレビューで結果を確認できます。新機能として、polygon 用のインタラクティブキャンバスエディタ、グリッドスナップ機能、そして三角形・星形などのプリセット形状を搭載しました。これにより、手作業での座標入力を最小限に抑えながら複雑な形状を素早く作成できます。

デザインモック、LP の装飾、UI カードの切り抜き、ヒーロー画像の変形、プロトタイピングなどに便利です。チームレビューで『この clip-path の元データは何だったか』を再確認するときにも役立ちます。処理はブラウザ内で完結し、外部へデザイン情報を送信しません。