Generador de box shadow CSS gratis

En orden: inset (opcional), desplazamiento X, desplazamiento Y, radio de desenfoque, radio de expansión y color. Un X positivo mueve la sombra a la derecha y un Y positivo la mueve hacia abajo. Un desenfoque de 0 da un borde nítido. Esta herramienta siempre escribe las cuatro longitudes en px y luego el color.

Usa un desplazamiento Y pequeño, un desenfoque grande y poca opacidad, con la expansión cerca de 0. Un buen punto de partida aquí es Y 6 px, desenfoque 24 px y opacidad 12 %, lo que da 0px 6px 24px 0px #0000001f. Añade una segunda capa más ajustada para dar más profundidad.

El desenfoque suaviza el borde de la sombra, y un desenfoque mayor la difumina en un área más amplia. La expansión agranda o reduce la sombra antes del desenfoque: una expansión positiva la hace más grande que la caja y una negativa, más pequeña. Aquí el desenfoque va de 0 a 100 px y la expansión de -50 a 50 px.

Haz clic en Añadir capa de sombra. Cada capa tiene su pestaña y sus propios ajustes, y el código las une con comas, una por línea. En CSS, la primera sombra de la lista se dibuja encima, así que la Capa 1 queda sobre las demás.

Selecciona la capa y marca Sombra interna. El código añade la palabra clave inset y la sombra se dibuja dentro de la caja en lugar de fuera. Con inset, una expansión positiva hace más gruesa la sombra interna. Puedes combinar capas internas y externas en una misma regla.

Usa dos capas con desplazamientos opuestos: una oscura, como #000000 al 15 % con X e Y en 8 px, y otra blanca en -8 px con opacidad total. Dale al elemento y a su contenedor el mismo fondo suave. La tarjeta de vista previa de aquí se mantiene blanca, así que comprueba el resultado en tu página.

box-shadow sigue la caja del elemento y sus esquinas redondeadas, y admite expansión e inset. El filtro drop-shadow() sigue la forma visible, como un PNG transparente o un icono SVG, pero no tiene expansión ni inset. Esta herramienta solo genera box-shadow.

No. Una sombra no ocupa espacio, así que no desplaza otros elementos ni cambia el tamaño de la caja. Un contenedor con overflow: hidden puede recortarla, por eso deja algo de padding alrededor del elemento cuando el desenfoque o el desplazamiento sean grandes.

La herramienta añade la opacidad al color como dos dígitos hexadecimales, así que solo funciona con códigos hex de 6 dígitos como #1e293b. Los códigos cortos como #fff, los nombres de color y rgba() generan CSS no válido y la sombra desaparece. Un desenfoque menor que 0 o una opacidad mayor que 100 producen el mismo efecto.

No directamente, ya que el resultado es CSS puro. En Tailwind, pon los valores en una clase de sombra arbitraria y cambia cada espacio por un guion bajo, como en shadow-[0px_4px_12px_0px_#00000026], o añade el valor completo como una sombra personalizada en tu tema.

Sí. Es gratuito, sin cuenta y sin límite de sombras ni de capas. Tus valores permanecen en esta pestaña y no se guardan, así que al recargar vuelve la sombra predeterminada. En el sitio en vivo, Google Analytics cuenta los clics en Copiar CSS, nunca los valores de la sombra.