Colores y diseño
Generador de box-shadow
La sombra perfecta con deslizadores, el código CSS en un clic.
Una sombra bien ajustada despega una tarjeta de la página, separa un botón del fondo y da jerarquía a una interfaz — pero escribir un valor de box-shadow a mano es pura adivinanza. Aquí todo se regula con deslizadores: desplazamiento horizontal y vertical, radio de difuminado, extensión, opacidad de la sombra, más una casilla para pasar a sombra interior (inset). La vista previa — una tarjeta sobre fondo neutro — refleja cada ajuste en vivo, exactamente como lo renderizará tu navegador. Cuando el resultado te convenza, copia la declaración CSS completa en un clic y pégala en tu hoja de estilos o tu sistema de diseño. Gratis, sin registro, y todo funciona en tu navegador.
¿Cómo funciona?
- Define los desplazamientos horizontal (X) y vertical (Y).
- Ajusta el difuminado, la extensión y la opacidad de la sombra.
- Activa «inset» si quieres una sombra interior.
- Copia el CSS generado en un clic.
Preguntas frecuentes
¿Cómo consigo una sombra natural y discreta?
Desplazamiento vertical pequeño (2 a 8 px), horizontal nulo o mínimo, difuminado generoso (dos o tres veces el desplazamiento) y opacidad baja (8 a 20 %). La luz viene de arriba, así que la sombra cae hacia abajo.
¿Qué hace el parámetro de extensión (spread)?
Agranda (valor positivo) o contrae (valor negativo) la sombra antes de aplicar el difuminado. Una extensión negativa produce sombras ceñidas y elegantes; una positiva con difuminado cero dibuja un borde sólido.
¿Cuándo conviene una sombra interior (inset)?
Para un efecto hundido: campos de formulario, botones pulsados, paneles en relieve inverso. La sombra se dibuja dentro del elemento en lugar de proyectarse detrás de él.
¿Las sombras perjudican el rendimiento?
Una box-shadow estática está muy bien optimizada por los navegadores. Solo evita animar el difuminado de forma continua en superficies grandes — para las transiciones, anima mejor la opacidad de un pseudoelemento que lleve la sombra.