Generador de sombras de cajas
Genere propiedades CSS box-shadow
Capas de sombra
Sombra 1
Sombras predefinidas
Consejos sobre sombras
Los valores de desplazamiento positivos mueven las sombras hacia abajo y a la derecha; los negativos las mueven hacia arriba y a la izquierda.
El radio de desenfoque determina la suavidad de la sombra; los valores más altos crean sombras más difusas.
El radio de expansión aumenta o reduce el tamaño de la sombra.
Las sombras interiores crean sombras dentro del elemento para dar efectos de profundidad.
Se pueden superponer varias sombras para crear efectos de iluminación complejos.
Los valores de opacidad más bajos crean sombras más sutiles y realistas.
Vista previa en tiempo real
Escala de vista previa: 100%
Declaración CSS
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);Clase CSS
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (aproximado)
shadowEsta es una sugerencia de estilo. Los desplazamientos y colores personalizados, las sombras interiores y las capas múltiples requieren el CSS generado.
Ajuste una capa o pruebe un ajuste predefinido. La vista previa se actualiza mientras trabaja.
Acerca del generador de sombras de cajas
Nuestro generador de box shadow CSS gratis le ayuda a crear efectos de sombra profesionales con control visual total. Ajuste el desplazamiento, el radio de desenfoque, el radio de expansión, el color y la opacidad con controles deslizantes intuitivos y vea el resultado actualizarse en tiempo real. Combine varias sombras en capas para lograr efectos de profundidad complejos que hagan destacar los elementos de su interfaz.
Las sombras son esenciales para establecer la jerarquía visual y la profundidad en las interfaces web modernas. Un box-shadow bien elaborado puede hacer que las tarjetas parezcan flotar sobre la página, que los botones se sientan interactivos y que los elementos de navegación destaquen sobre el fondo. Esta herramienta elimina el ensayo y error de escribir a mano los valores de box-shadow.
El generador admite sombras exteriores e sombras internas (inset), varias capas de sombra e incluye 6 plantillas predefinidas para estilos de sombra comunes. El resultado se entrega como código CSS con un botón para copiarlo con un clic, junto con sugerencias aproximadas de clases de utilidad de Tailwind CSS. Todo el procesamiento ocurre en su navegador y no se envían datos a ningún servidor.
Características principales
- Varias capas de sombra que se pueden agregar, eliminar y configurar individualmente
- Controles deslizantes precisos para el desplazamiento X, el desplazamiento Y, el radio de desenfoque y el radio de expansión
- Selector de color con entrada hexadecimal y opacidad ajustable para cada capa de sombra
- Interruptor de sombra interna (inset) para crear profundidad interior y efectos en relieve
- 6 plantillas de sombra predefinidas: Sutil, Media, Grande, Extragrande, Interna y Múltiple
- Generador de sombras aleatorias para descubrir combinaciones creativas
- Vista previa en vivo y en tiempo real con color de elemento personalizable
- Copia al portapapeles con un clic y código CSS limpio
- Salidas en formatos alternativos, como clase CSS y utilidad aproximada de Tailwind CSS
- Compatibilidad total con modo oscuro para editar cómodamente en cualquier condición de luz
Cómo usar el generador de sombras de cajas
- Agregue capas de sombra: Empiece con la sombra predeterminada o haga clic en Agregar para crear capas de sombra adicionales y lograr efectos complejos.
- Ajuste las propiedades de la sombra: Use los controles deslizantes para definir el desplazamiento X/Y, el radio de desenfoque, el radio de expansión, el color y la opacidad de cada capa de sombra.
- Active el modo inset: Marque la casilla Inset en cualquier capa de sombra para crear un efecto de sombra interna en lugar de una externa.
- Previsualice el resultado: Observe el elemento de vista previa en vivo para ver exactamente cómo queda su sombra. Cambie el color del elemento de vista previa si lo necesita.
- Pruebe las plantillas: Haga clic en cualquiera de las 6 plantillas predefinidas para aplicar rápidamente estilos de sombra comunes como punto de partida.
- Copie el CSS: Haga clic en el botón Copiar para copiar al portapapeles la declaración CSS completa de box-shadow.
Casos de uso
- Elevación de tarjetas: Añada profundidad a los componentes de tarjeta para que parezcan flotar sobre el fondo de la página.
- Estados hover de botones: Cree transiciones de sombra para botones que respondan visualmente a la interacción del usuario.
- Estilo de modales y diálogos: Aplique sombras grandes y suaves a modales y cuadros de diálogo para separarlos con claridad del fondo.
- Menús desplegables de navegación: Dé estilo a menús desplegables y popovers con sombras que transmitan capas y profundidad.
- Efectos de enfoque en campos: Use sombras de color como indicadores de enfoque en campos de formulario y elementos interactivos.
- Efectos inset: Cree aspectos de presionado o relieve para botones de alternancia, estados activos y elementos decorativos.
- Diseño neumórfico: Combine varias sombras claras y oscuras para lograr la popular estética de interfaz suave.
- Marcos para imágenes: Añada sombras sutiles a imágenes y contenedores multimedia para una apariencia de galería pulida.
Preguntas frecuentes
¿Esta herramienta es gratuita?
Sí, el generador de sombras de cajas es totalmente gratis, sin límite en el número de sombras que puede crear. No se requiere registro ni pago.
¿Mis datos están seguros?
Toda la generación y la vista previa de las sombras ocurren por completo en su navegador. No se envían datos a ningún servidor externo, por lo que sus configuraciones y su código CSS permanecen totalmente privados.
¿Cuál es la diferencia entre el radio de desenfoque y el radio de expansión?
El radio de desenfoque controla qué tan suave o difusa se ve la sombra: los valores más altos crean un degradado más gradual. El radio de expansión aumenta (valores positivos) o reduce (valores negativos) el tamaño de la sombra en relación con el elemento.
¿Puedo usar varias sombras en un mismo elemento?
Sí, CSS admite varios box-shadow separados por comas. Esta herramienta le permite agregar varias capas de sombra y las combina automáticamente en una sola declaración de box-shadow.
¿Qué es una sombra interna (inset)?
Una sombra inset se dibuja dentro del elemento en lugar de fuera, y crea una apariencia hundida o presionada. Se usa con frecuencia en campos de entrada, estados activos de botones y diseños neumórficos.
¿Todos los navegadores admiten box-shadow?
Sí, la propiedad box-shadow es totalmente compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. No se necesitan prefijos de proveedor.
Consejos y buenas prácticas
- Mantenga las sombras sutiles: Una opacidad baja (5-15%) y un desenfoque moderado crean sombras realistas y profesionales que no saturan el diseño.
- Use una expansión negativa: Un radio de expansión ligeramente negativo hace que las sombras se vean más ajustadas y concentradas bajo el elemento.
- Combine varias sombras en capas: Junte una sombra oscura y ceñida con otra más amplia y clara para lograr una profundidad natural, similar a la iluminación real.
- Respete su fuente de luz: Mantenga direcciones de desplazamiento coherentes en todo el diseño para simular una única fuente de luz uniforme.
- Tenga en cuenta el rendimiento: Los valores de desenfoque grandes en muchos elementos pueden afectar el rendimiento de renderizado, sobre todo en dispositivos móviles.
- Use las sombras para la jerarquía: Una elevación mayor (más desplazamiento y desenfoque) debe indicar los elementos que están más cerca del usuario en la pila visual.