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%;
Cómo crear bordes orgánicos
- 1Arrastra los 8 controladores alrededor de la caja para moldear la curvatura.
- 2Observa cómo el rectángulo se transforma en una forma orgánica o gota fluida.
- 3Copia la propiedad CSS `border-radius` de 8 valores resultante.
Diseño Fluido sin Archivos SVG
Al especificar radios horizontales y verticales separados por una barra (`/`), CSS permite construir figuras orgánicas con código puro.
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.
Preguntas Frecuentes (FAQ)
Herramientas Relacionadas
Popular
Generador de Glassmorphism CSS
Diseña tarjetas con efecto de cristal esmerilado con desenfoque en tiempo real
Launch tool→
Popular
Generador de Sombras (box-shadow) CSS
Diseña sombras multicapa realistas y suaves con profundidad inset personalizable
Launch tool→
Trending
Generador de Degradados CSS
Crea degradados lineales, radiales y cónicos con controles de color interactivos
Launch tool→
Generador de Triángulos CSS
Crea flechas y triángulos geométricos puros con bordes CSS sin usar imágenes
Launch tool→