Organic Shape Presets
Horizontal Radii (Width Curves)
Top-Left H30%
Top-Right H70%
Bottom-Left H30%
Bottom-Right H70%
Vertical Radii (Height Curves)
Top-Left V30%
Top-Right V30%
Bottom-Left V70%
Bottom-Right V70%
Color & Appearance
Fill Color
Border Outline
Real-Time Shape Canvas
Organic Blob
8-Point Radius
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
有機的角丸の作成手順
- 1プレビューボックス周囲の8つのハンドルをドラッグして各頂点の丸みを調整します。
- 2長方形から流動的なブロブ（水滴・有機体）形状への変化を確認します。
- 3生成された8値の `border-radius` CSSコードをコピーします。
SVG不要の流動的UIデザイン
CSSの8点角丸構文を利用することで、SVGベクター画像を用意することなく、純CSSのみで躍動感のあるカードやアバター枠を表現できます。
Architecture & Privacy
- Full CSS 8-Point Slash Syntax: Computes both horizontal and vertical radii (horizontal-radii / vertical-radii).
- Asymmetrical Curvature: Unlocks complex organic blobs and fluid geometric shapes without SVG dependencies.
- Native GPU acceleration: Utilizes hardware rasterized CSS border curves with zero layout reflows.
- Tailwind Arbitrary compatible: Generates sanitized rounded-[...] classes ready for production.
よくある質問 (FAQ)
関連開発ツール
Popular
すりガラス効果 (Glassmorphism) 生成
リアルタイムプレビューとWebKitプレフィックス付きCSSコード生成
Launch tool→
Popular
多重ボックスシャドウ (box-shadow) 生成
滑らかで自然な多層シャドウ、インセット陰影、光彩エフェクトのCSS作成
Launch tool→
Trending
グラデーション背景生成
線形(Linear)、放射状(Radial)、円錐(Conic)グラデーションの視覚的ビルダー
Launch tool→
純CSS 三角形ジェネレーター
画像不要、borderプロパティの幾何学的特性を活かしたクリーンな三角形作成
Launch tool→