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%;
Como criar bordas arredondadas orgânicas
- 1Arraste os 8 controles ao redor da caixa para moldar a curvatura.
- 2Veja o retângulo se transformar em uma forma orgânica fluida.
- 3Copie a propriedade CSS `border-radius` de 8 valores resultante.
Design Fluido sem Arquivos SVG
Ao definir raios horizontais e verticais separados por barra (`/`), o CSS permite esculpir silhuetas vivas com código nativo.
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.
Perguntas Frequentes (FAQ)
Ferramentas Relacionadas
Popular
Gerador de Glassmorphism CSS (Efeito Vidro Fosco)
Crie cartões translúcidos com efeito de vidro fosco e desfoque em tempo real
Launch tool→
Popular
Gerador de Sombras (box-shadow) CSS em Camadas
Crie sombras suaves, realistas e multicamadas com profundidade inset personalizada
Launch tool→
Trending
Gerador de Gradientes CSS (Linear e Radial)
Crie gradientes lineares, radiais e cônicos com paradas de cores interativas e exportação CSS
Launch tool→
Gerador de Triângulos Puros em CSS
Gere setas e triângulos geométricos puros usando bordas CSS sem nenhuma imagem
Launch tool→