⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Generador de formas de blobs CSS orgánicos

Diseñe visualmente el radio del borde de CSS: cuatro controles deslizantes de esquina independientes en px o porcentaje, un atajo de enlace en todas las esquinas para círculos y píldoras instantáneos, además de un modo de burbuja orgánica con formas aleatorias.

12px
12px
12px
12px
Procesando... 0%

Resultado

Esta página abre el generador de radio de borde directamente en modo blob con una forma orgánica ya cargada: sin esquinas cuadradas, ni círculo perfecto, solo un suave contorno irregular construido solo con CSS. Pulsa Aleatorizar en cualquier momento para obtener una nueva variación.

El truco detrás de cada blob CSS es la sintaxis de barra diagonal de ocho valores: border-radius acepta dos conjuntos de cuatro porcentajes separados por una barra, el primer conjunto curva los radios horizontales y el segundo los verticales. No coincidir los dos conjuntos es exactamente lo que rompe la simetría de un rectángulo redondeado en un contorno orgánico.

Blobs como este llenan el espacio vacío detrás de imágenes destacadas, avatares e ilustraciones en innumerables páginas de destino modernas, precisamente porque no se necesita ninguna biblioteca ni exportación SVG: son cuatro líneas de CSS. Copie la forma actual o siga aleatorizando hasta que la que le parezca adecuada para su diseño.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Modo de esquinas: controles deslizantes de radio independientes arriba a la izquierda, arriba a la derecha, abajo a la derecha y abajo a la izquierda, cada uno conmutable entre unidades de px y porcentaje.
  • Casilla de verificación para vincular todas las esquinas que dirige cada esquina desde un control deslizante, además de una vista previa de tablero de ajedrez sobre un fondo claro u oscuro para que las esquinas recortadas permanezcan visibles.
  • Modo Blob con un botón Aleatorizar que crea formas orgánicas de sintaxis de barra de ocho valores, que se muestran en tamaño grande y listas para copiar como CSS.

Beneficios clave

✓ Cada control deslizante actualiza la vista previa en vivo y la línea CSS al instante, por lo que nunca tendrás que adivinar cómo se ve realmente 12px 40% 8px 24%.
✓ El atajo de enlace de todas las esquinas convierte un control deslizante en un círculo, pastilla o ardilla perfecto sin tocar las otras tres esquinas con la mano.
✓ El modo Blob genera formas orgánicas y aleatorias con la sintaxis de barra diagonal de ocho valores de CSS: una apariencia que un solo valor de radio de borde nunca podrá producir.

Casos de uso

  • • Marque los radios de las cuatro esquinas de una tarjeta de forma independiente: redondee solo la parte superior de un panel desplegable o solo un lado de una pestaña.
  • • Vincula las cuatro esquinas a un control deslizante para construir un círculo perfecto, un botón de pastilla con forma de estadio o una ardilla estilo iOS en segundos.
  • • Cambie al modo blob y presione Aleatorizar hasta que una forma orgánica se ajuste al espacio vacío detrás de una imagen de héroe o avatar, luego copie el CSS.