# Generador de Sombra de Caja CSS Genera propiedades de sombra de caja CSS > Página canónica: https://elysiatools.com/es/tools/box-shadow-generator - **Categoría:** Design - **Palabras clave:** css, sombra-caja, sombra, generador, estilo ## Descripción general El Generador de Sombra de Caja CSS es una herramienta intuitiva diseñada para crear y visualizar propiedades de sombra en elementos web, permitiéndote obtener el código CSS exacto para tus diseños de forma rápida y precisa. ## Entradas - **Desplazamiento Horizontal (px)** (range) - **Desplazamiento Vertical (px)** (range) - **Radio de Desenfoque (px)** (range) - **Radio de Expansión (px)** (range) - **Color de Sombra** (color): #000000 - **Opacidad** (range) - **Sombra Interior** (checkbox) ## Cuándo usarlo - Cuando necesites añadir profundidad visual a tarjetas, botones o contenedores en tu sitio web. - Al buscar un estilo de sombra específico sin tener que escribir y probar manualmente los valores de código. - Para experimentar con efectos de sombra interior o exterior en tiempo real antes de implementarlos en tu hoja de estilos. ## Cómo funciona - Ajusta los deslizadores para definir el desplazamiento horizontal y vertical de la sombra. - Modifica el radio de desenfoque y expansión para controlar la suavidad y el tamaño del efecto. - Selecciona el color y la opacidad deseados, y activa la opción de sombra interior si es necesario. - Copia el código CSS generado automáticamente para pegarlo directamente en tu proyecto. ## Casos de uso - Creación de tarjetas de contenido con elevación visual para mejorar la jerarquía de la interfaz. - Diseño de botones interactivos que cambian de sombra al pasar el cursor para mejorar la experiencia de usuario. - Generación de efectos de profundidad en modales o menús desplegables para separarlos del fondo. ## Preguntas frecuentes ### ¿Qué es el radio de desenfoque? Es la propiedad que determina qué tan difusa o borrosa será la sombra; a mayor valor, más suave será el efecto. ### ¿Puedo crear sombras interiores? Sí, al marcar la opción 'Sombra Interior' (inset), la sombra se aplicará dentro del borde del elemento en lugar de fuera. ### ¿Cómo afecta el radio de expansión? El radio de expansión aumenta o disminuye el tamaño de la sombra; valores positivos la agrandan y negativos la encogen. ### ¿Es compatible este código con todos los navegadores? Sí, el código generado utiliza la propiedad estándar 'box-shadow', compatible con todos los navegadores modernos. ### ¿Puedo cambiar el color de la sombra? Absolutamente, puedes elegir cualquier color mediante el selector de color y ajustar su opacidad para lograr el efecto deseado. ## Herramientas relacionadas - [Generador de Animaciones CSS](https://elysiatools.com/es/tools/animation-generator): Genera fotogramas clave y propiedades de animación CSS - [Generador de Filtro de Fondo CSS](https://elysiatools.com/es/tools/backdrop-filter-generator): Genera propiedades de filtro de fondo CSS para efectos de vidrio esmerilado - [Generador de Radio de Borde CSS](https://elysiatools.com/es/tools/border-radius-generator): Genera propiedades de radio de borde CSS - [Generador de Ruta de Recorte CSS](https://elysiatools.com/es/tools/clip-path-generator): Genera propiedades de ruta de recorte CSS para formas personalizadas - [Generador de Filtros CSS](https://elysiatools.com/es/tools/css-filter-generator): Genera propiedades de filtro CSS - [Generador de Transformaciones CSS](https://elysiatools.com/es/tools/transform-generator): Genera propiedades de transformación CSS - [Generador de Gradiente de Color](https://elysiatools.com/es/tools/color-gradient-generator): Genera gradientes de color suaves entre múltiples colores con pasos y formatos personalizables - [Generador de Sombras de Color](https://elysiatools.com/es/tools/color-shade): Genere variaciones más oscuras de un color agregando negro, creando sombras ricas para profundidad y contraste en el diseño ## Ejemplos - [Muestras CSS](https://elysiatools.com/es/samples/css-viewer-samples): Archivos de muestra para el visor CSS en el navegador - [Ejemplos del Framework CSS Bulma](https://elysiatools.com/es/samples/bulma): Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS - [Ejemplos de Selectores CSS](https://elysiatools.com/es/samples/css-selectors): Colección de ejemplos de selectores CSS para pruebas de extracción y análisis - [Ejemplos del Framework CSS Milligram](https://elysiatools.com/es/samples/milligram): Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes ## Contenido relacionado - [Flujo de sistema de color y efectos CSS](https://elysiatools.com/es/hubs/design-generate): Extrae una paleta, construye relaciones accesibles, genera tokens y aplica efectos CSS coherentes en estados reales de interfaz.