Generador de Sombras CSS
Qué es Generador de Sombras CSS
Un generador de sombras CSS te permite diseñar un box-shadow de forma visual y copiar el CSS exacto. Define el desplazamiento horizontal y vertical, el radio de desenfoque, la extensión y el color de la sombra con su opacidad, y observa cómo cambia la vista previa mientras mueves cada control. Puedes apilar varias sombras en un mismo elemento y marcar cualquier capa como interna, así el cuadro de salida siempre muestra una declaración box-shadow lista para pegar.
Cómo usar
- Mueve los controles de desplazamiento para desplazar la sombra en horizontal y en vertical.
- Ajusta el radio de desenfoque para un borde suave y la extensión para agrandar o reducir la sombra.
- Elige el color de la sombra, ajusta su opacidad y activa interna para una sombra por dentro.
- Añade más capas si las necesitas y copia el CSS generado desde el cuadro de salida.
Cuándo usarla
¿Necesitas una sombra de tarjeta discreta que se vea moderna en lugar de dura? Pon el desplazamiento en 0px y 10px, 20px de desenfoque, sin extensión y color negro al 25% de opacidad, luego copia box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); directo a tu hoja de estilos. Igual de útil para estados hover de botones, profundidad por capas o una sombra interna que hace que un campo parezca hundido.
Preguntas frecuentes
¿Qué significan los valores de box-shadow?
En orden son el desplazamiento horizontal, el desplazamiento vertical, el radio de desenfoque, la extensión y el color. Los desplazamientos positivos empujan la sombra a la derecha y hacia abajo, el desenfoque suaviza el borde y la extensión agranda o reduce toda la sombra antes de desenfocar.
¿Para qué sirve el valor de extensión?
La extensión cambia el tamaño de la sombra antes de aplicar el desenfoque. Un valor positivo hace la sombra más grande que el elemento y uno negativo la recoge, útil para sombras ajustadas que asoman por un solo lado.
¿Puedo apilar más de una sombra?
Sí. Añade tantas capas como quieras y cada una se convierte en una sombra separada por comas dentro de la misma regla box-shadow. Apilar una sombra ancha y suave bajo otra más cercana y cerrada es una forma habitual de lograr profundidad realista.
¿Qué es una sombra interna?
Una sombra interna se dibuja dentro del elemento en lugar de detrás, así el cuadro parece hundido o rebajado. Activa interna en cualquier capa para cambiarla, algo que funciona bien en campos de formulario y botones pulsados.
¿Puedo compartir esta herramienta con mis datos precargados?
Sí. La URL se actualiza automáticamente mientras ajustas los controles. Cópiala desde la barra de direcciones o usa el botón Compartir, y quien abra el enlace verá tu sombra exacta lista para usar.
Herramientas relacionadas
Calculadora de Relación de Aspecto
Calcula la relación de aspecto, encuentra el ancho o alto que falta y redimensiona imágenes y vídeos manteniendo las proporciones. Gratis.
Generador de Código de Barras
Genera códigos de barras EAN-13 o Code 128 online. Introduce tu número o texto y descarga como SVG o PNG. Gratis, sin registro.
Decodificador Base64
Decodifica cadenas Base64 a texto plano al instante. Soporta salida Unicode completa con emojis. Decodificador Base64 gratuito.