Generador de sombras CSS
Ajusta capas de sombra, revisa la vista previa y copia el CSS desde un lienzo de escritorio estable.
Sombra #1
Básicos
Estilo
Color
Vista previa en vivo
box-shadow se actualiza al cambiar los valores.
Código CSS
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
Guía de sombras CSS
Una sombra natural sale de combinar posición, desenfoque, expansión y opacidad
El Generador de sombras CSS sirve para ajustar una o varias capas mientras ves la vista previa y la regla box-shadow exacta en el mismo lugar. Los desplazamientos horizontal y vertical marcan la dirección, el desenfoque y la expansión definen el borde, y la opacidad decide si la sombra se siente ligera o pesada. No hay botón de cálculo: el código cambia en cuanto mueves los controles.
Define primero la sombra y luego comprueba la forma del elemento
El flujo es de edición en vivo. Conviene separar los valores que sí se copian al CSS de los ajustes que solo sirven para la vista previa del elemento.
- Crea una capa en la pestaña Sombra. Ajusta desplazamiento horizontal, desplazamiento vertical, desenfoque, expansión, color, opacidad y sombra interior para cada capa.
- Añade otra capa solo cuando aporte algo. Varias capas se convierten en un único valor
box-shadowseparado por comas. Si una capa no cambia el resultado, elimínala. - Usa Vista previa para acercarte al elemento real. Cambia entre cuadrado, rectángulo redondeado, círculo, botón y tarjeta para revisar el efecto en un contexto parecido al de tu diseño.
- Parte de un preajuste y después ajústalo. Suave, capas, neón o interior son puntos de partida. Antes de pegar el código, revisa el valor final en el bloque CSS.
El desplazamiento mueve la sombra; el desenfoque y la expansión cambian la textura
Las partes de box-shadow se parecen por nombre, pero no hacen lo mismo. Si tratas desenfoque y expansión como un solo control, la sombra puede quedar borrosa o demasiado dura.
Desplazamiento horizontal y vertical
Los valores positivos llevan la sombra a la derecha y hacia abajo. Los negativos la mueven a la izquierda y hacia arriba. Úsalos como dirección de la luz.
Desenfoque
Suaviza el borde de la sombra. Cuanto mayor es el valor, más amplia y más ligera suele verse.
Expansión
Aumenta o reduce el área de la sombra antes del desenfoque. Una expansión negativa pequeña ayuda a mantener ligera la sombra de una tarjeta.
Color y opacidad
La herramienta une color y opacidad en un valor rgba(). La misma sombra negra con 0,2 visualmente no pesa igual que con 0,5, aunque en CSS el decimal se escribe con punto.
Sombra interior
Con inset activado, la sombra se dibuja dentro del elemento. Encaja bien en campos, botones presionados o tarjetas hundidas.
Forma y tamaño de vista previa
La forma y el tamaño solo cambian el elemento de prueba. No se añaden al box-shadow copiado.
El código copiado sigue el orden de valores de box-shadow
La salida es una propiedad CSS con inset opcional, desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color. Si hay varias capas, se unen con comas y el navegador las lee como una sola declaración box-shadow.
Un ejemplo inset se lee mejor como una sola línea de CSS
Por ejemplo, con inset activado, 12px de desplazamiento horizontal, 8px vertical, 18px de desenfoque, -2px de expansión, color #336699 y opacidad 0.35, se obtiene un valor como el siguiente. La expansión negativa evita que la sombra crezca demasiado y inset la lleva hacia el interior de la tarjeta.
La sombra no ocupa espacio de maquetación
Aunque box-shadow se vea fuera del elemento, no empuja el contenido cercano. Si el padre tiene overflow: hidden o la tarjeta queda pegada al borde de la pantalla, la sombra puede verse cortada.
Comprueba el fondo real antes de copiar
Una sombra puede dar claridad a una tarjeta, pero una sombra pesada también ensucia la página. El mismo valor CSS se percibe distinto sobre superficies claras y oscuras.
- Empieza con más desenfoque y menos opacidad. Una sombra amplia y suave suele verse más natural que una sombra oscura y compacta.
- Mueve la expansión en pasos pequeños. Una expansión positiva grande puede parecer un borde; una negativa muy grande puede esconder la sombra.
- Usa capas con intención. Dos o tres capas pueden dar profundidad, pero demasiadas capas hacen que el código sea más difícil de mantener.
- Ajusta de nuevo en superficies oscuras. Una sombra negra que funciona en una tarjeta clara puede parecer una mancha sobre un fondo oscuro.
Preguntas frecuentes
¿Cambiar el tamaño de vista previa cambia el código CSS?
No. El tamaño y la forma de vista previa solo cambian el elemento usado para revisar el efecto. El código copiado contiene desplazamientos, desenfoque, expansión, color y estado inset.
¿Cómo se aplican varias sombras?
La herramienta une las capas con comas. CSS las aplica como una lista de sombras, así que conviene revisar vista previa y código cuando la lista crece.
¿En qué se diferencian desenfoque y expansión?
El desenfoque suaviza el borde de la sombra. La expansión cambia el tamaño del área de sombra. Para sombras suaves de tarjetas, ajusta primero el desenfoque y mantén la expansión pequeña.
¿Cuándo conviene usar inset?
Usa inset cuando el elemento debe verse hundido hacia dentro, como un campo, una tarjeta rebajada o un botón presionado. Da la sensación contraria a una tarjeta flotante.