Generador de CSS Box Shadow y Border Radius

Generador de CSS Box Shadow y Border Radius

🎨 Generador gratuito de CSS box-shadow y border-radius con vista previa en vivo. Crea sombras hermosas, esquinas redondeadas y efectos UI modernos. Código listo para copiar y pegar para diseño web.

Propiedad Box Shadow

La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Puedes establecer múltiples efectos separados por comas. Una sombra se describe por los desplazamientos X e Y relativos al elemento, el radio de desenfoque y de expansión, y el color.

Sintaxis: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Parámetros de la sombra

• Desplazamiento X (horizontal): valores positivos mueven la sombra a la derecha, negativos a la izquierda
• Desplazamiento Y (vertical): valores positivos mueven la sombra hacia abajo, negativos hacia arriba
• Radio de desenfoque: valores mayores crean más desenfoque. 0 significa sombra nítida
• Radio de expansión: valores positivos expanden la sombra, negativos la reducen
• Color: cualquier valor de color CSS (hex, rgb, rgba, hsl)
• Inset: cambia la sombra a interna en lugar de externa

Propiedad Border Radius

La propiedad border-radius redondea las esquinas del borde exterior de un elemento. Puedes establecer un único radio para esquinas circulares, o dos radios para esquinas elípticas.

Sintaxis: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Casos de uso comunes

• Tarjetas: sombra sutil (0 4px 6px rgba(0,0,0,0.1)) con radio medio (8px)
• Botones: sombra coloreada a juego con el botón para dar profundidad
• Modales: sombra grande (0 20px 25px rgba(0,0,0,0.15)) para parecer flotantes
• Imágenes: avatares circulares (border-radius: 50%) o miniaturas redondeadas (8–16px)
• Campos de entrada: sombra inset para estado presionado/enfocado
• Diseño neumórfico: múltiples sombras (claras y oscuras) con fondo similar

Buenas prácticas para sombras

• Usa sombras sutiles: 10–20% de opacidad suele ser suficiente para dar profundidad
• Y-offset > X-offset: imita luz natural desde arriba
• Más desenfoque para elevación: más blur = parece más alto sobre la página
• Combina el color de la sombra: usa el color del elemento con baja opacidad para coherencia
• Rendimiento: evita animar box-shadow; mejor usa opacity o transform

Estilos de sombra populares

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Patrones de Border Radius

• Ninguno (0px): esquinas rectas, look minimalista moderno
• Pequeño (4px): redondeo sutil para inputs y botones
• Medio (8px): estándar para tarjetas y contenedores
• Grande (16px+): diseño más amigable y accesible
• Píldora (999px o 50%): extremos redondeados para etiquetas y badges
• Círculo (50%): avatares y botones de icono (requiere elemento cuadrado)

Técnicas avanzadas

• Múltiples sombras: combina sombras para efectos por capas
• Efecto glow: 0 0 20px [color] sin desplazamiento
• Neumorfismo: sombra clara arriba-izquierda, sombra oscura abajo-derecha
• Anillos de enfoque: sombra coloreada para accesibilidad (0 0 0 3px rgba(color,0.5))
• Efecto 3D: múltiples sombras con offsets y blur crecientes

Compatibilidad con navegadores

Box-shadow y border-radius son compatibles con todos los navegadores modernos. Para IE8 y anteriores, usa prefijos (-webkit-box-shadow, -moz-box-shadow), aunque hoy en día rara vez es necesario.

💡 Consejo pro: para efectos hover, no animes box-shadow directamente (es costoso). En su lugar, crea la sombra en un pseudo-elemento (::before o ::after) y anima su opacidad. Obtendrás el mismo efecto visual con mucho mejor rendimiento, especialmente en móviles.