Entrada
Preparando tu espacio de trabajo…
Cómo usarlo
- Ajusta los desplazamientos horizontal y vertical, el desenfoque y la expansión.
- Elige color y opacidad; activa Sombra interior si lo necesitas.
- Comprueba la vista previa y selecciona Copiar CSS.
Crear una sombra de caja
Las sombras separan una tarjeta de su fondo o sugieren una superficie hundida. Unos pocos valores controlan el efecto sin necesidad de crear una imagen.
La vista previa muestra la sombra mientras modificas su geometría y color. El radio de las esquinas permite comparar formas sin añadir declaraciones ajenas a la salida copiada.
Desplazamiento, desenfoque y expansión
Los desplazamientos mueven la sombra respecto al elemento. Los valores negativos la llevan a la izquierda o arriba; los positivos, a la derecha o abajo.
El desenfoque suaviza el borde y no admite valores negativos. La expansión reduce la extensión de la sombra si es negativa y la aumenta si es positiva.
0px 8px 24px 0px, black at 15%box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);Una sombra exterior desplazada 8px hacia abajo, con desenfoque de 24px y negro al 15 %.
Color y sombra interior
El selector define el color y la opacidad controla su canal alfa. Una sombra poco opaca deja ver más el fondo de la página.
Sombra interior coloca la sombra dentro de la caja. El generador crea una sola sombra; para varias capas, escribe una lista separada por comas en CSS.
Usar el CSS
Copiar CSS exporta únicamente box-shadow:. Para reproducir la forma redondeada de la vista previa, añade border-radius al elemento por separado.
Entrada de texto de hasta 1 MiB. Las transformaciones de CSS y HTML se ejecutan en un worker con un límite de 30 segundos. Las herramientas de color usan sRGB; los estilos generados son vistas previas y deben probarse en tu propio diseño.
Preguntas frecuentes
¿El CSS incluye el radio de las esquinas de la vista previa?
No. Solo afecta a la vista previa. Añade border-radius por separado si quieres la misma forma en tu interfaz.
¿Qué diferencia hay entre desenfoque y expansión?
El desenfoque suaviza el borde. La expansión aumenta o reduce la extensión antes de aplicar ese desenfoque.
¿La expansión puede ser negativa?
Sí. Una expansión negativa reduce la sombra; el desenfoque debe ser cero o positivo.
¿Puedo crear una sombra interior?
Sí. Activa Interior y la declaración copiada incluirá la palabra clave inset.
¿Se generan varias capas de sombra?
No. Se genera una sombra. Puedes combinarla con otras separadas por comas en tu hoja de estilos.