Generador de Sombra de Caja
Herramienta visual para crear y copiar código CSS box-shadow.
Entorno
Salida CSS
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
Capa 1
Herramientas recomendadas
Utilidades seleccionadas que podrían serte útiles
Diseñar sombras CSS (box-shadow) de forma visual
Resumen
Un generador de box-shadow te permite crear la propiedad CSS box-shadow arrastrando controles en vez de adivinar números. Las sombras aportan profundidad y jerarquía a botones, tarjetas y modales, pero la sintaxis —desplazamientos, desenfoque, expansión, color e inset— es engorrosa de escribir a mano. Esta herramienta muestra una vista previa en vivo mientras ajustas cada valor y te da el CSS exacto para copiar, todo en tu navegador.
Cómo usar (paso a paso)
- 1
Ajusta los controles
Fija el desplazamiento horizontal y vertical, el desenfoque, la expansión y el color mientras miras la vista previa en vivo.
- 2
Apila sombras si hace falta
Añade varias capas de sombra para dar profundidad, o activa inset para una sombra interior.
- 3
Copia el CSS
Toma el valor box-shadow generado y pégalo en tu hoja de estilos o componente.
Cómo Funciona
La propiedad box-shadow toma desplazamientos horizontal y vertical, un radio de desenfoque, una expansión opcional y un color (normalmente con transparencia). Mueves controles para cada uno y la vista previa se actualiza al instante, así ves exactamente cómo cae la sombra. La herramienta escribe la declaración box-shadow correspondiente, incluidas varias sombras apiladas si las añades, lista para pegar en tu hoja de estilos.
Cuándo usarlo
Añadir una sombra sutil para elevar una tarjeta o botón. Reproducir una sombra de una maqueta sin adivinar los valores. Construir una sombra realista y en capas con varias sombras apiladas. Crear una sombra inset para elementos de UI pulsados o hundidos. Afinar la suavidad y el color de la sombra para temas oscuros o claros. Aprender cómo afecta cada valor de box-shadow al resultado.
Preguntas Frecuentes
En orden: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque y expansión. Los desplazamientos mueven la sombra, el desenfoque suaviza su borde y la expansión la agranda o encoge. Le sigue un color, a menudo rgba() con baja opacidad para sutileza.
Notas Importantes
Box-shadows pesadas o numerosas pueden perjudicar el rendimiento del renderizado, sobre todo al animarse. Mantén las sombras sutiles y limita las capas apiladas en elementos que se mueven o actualizan a menudo.