Generador de box-shadow

¿Qué es un generador de box-shadow y de botones?#

Un box-shadow es la regla CSS que pinta una sombra tras un elemento. A pesar del nombre, hace mucho más que sombras: bien estratificado produce la elevación suave que hace que las tarjetas y los botones modernos de interfaz se sientan físicos, puede tallar un surco interior para un estado «pulsado» y puede imitar un brillo de color alrededor de un campo con foco. El problema es que acertar una sombra bien significa malabarear cinco valores por capa (Desplazamiento X, Desplazamiento Y, Desenfoque, Expansión, Color) más una palabra clave inset opcional, y la mayoría de los botones reales apilan dos o tres capas, así que acabas afinando de diez a quince números a mano.

Esta página elimina la aritmética. Apilas capas de sombra y ajustas el radio, el borde, el relleno y los colores de un botón en la barra lateral; el panel derecho muestra un botón en vivo con la sombra aplicada y escribe tanto la regla CSS .btn como el HTML <button> correspondiente, listos para pegar. Lo que ves al cargar es el familiar botón elevado de dos capas usado en los sistemas de diseño modernos: un punto de partida correcto que luego empujas hacia tu propia marca.

Cómo se usa#

La barra lateral contiene los controles; el panel derecho contiene la vista previa, la salida CSS y la salida HTML.

1. Construye la sombra. Bajo Sombras, haz clic en Añadir capa para apilar una capa nueva. Cada capa tiene seis controles:
   • Desplazamiento X / Desplazamiento Y — cuánto se desplaza la sombra a la derecha/abajo (el negativo va a la izquierda/arriba). 0/0 la centra, produciendo un brillo uniforme.
   • Desenfoque — lo suave que es el borde. 0 es una copia dura y plana; los valores grandes la difuminan. El desenfoque no puede ser negativo en CSS.
   • Expansión — hace crecer o encoge la huella de la sombra. Una expansión negativa aprieta un desenfoque ancho en un borde ajustado y convincente.
   • Color — un color hex. Usa el canal alfa (un hex de 8 dígitos como #00000033) para hacer la sombra translúcida; los colores totalmente opacos se renderizan como #RRGGBB sólido.
   • Interior — activa esto para pintar la sombra dentro del elemento (un aspecto pulsado, tallado) en vez de detrás.
   • Subir la capa / Bajar la capa / Eliminar la capa reordenan o eliminan capas. La primera capa de la lista se pinta encima; la última se sienta más al fondo.
2. Estiliza el botón. Bajo Botón, fija el texto de la Etiqueta, luego el Radio, el ancho del Borde, el Color del borde, el Relleno Y / X, el Fondo y el Color del texto. Los campos de color emparejan una caja de texto hex con un selector de color nativo.
3. Copia lo que necesites. Copiar junto a la salida CSS toma la regla .btn completa; Copiar junto a la salida HTML toma el elemento <button>. Poner el ancho del borde a 0 colapsa el borde en border: none;.

Características clave#

• Múltiples capas, en orden. Una sombra convincente casi siempre son dos o tres capas: un borde oscuro y ajustado cerca del elemento y un lavado más suave y claro más lejos. Puedes apilar y reordenar las que necesites.
• Serialización de color consciente del alfa. Un color totalmente opaco se emite como un #RRGGBB limpio; en el momento en que añadas transparencia cambia a rgba(r, g, b, a) con un alfa recortado: las formas que las hojas de estilos reales usan.
• El botón entero en una regla. Radio, borde, relleno, fondo, color de texto y la sombra se emiten todos en un único bloque .btn, así que un solo pegado estiliza el elemento por completo.
• HTML que coincide. La salida HTML es simplemente <button class="btn">Etiqueta</button>, con la etiqueta escapada como HTML: incluso una etiqueta llena de < o & es segura de pegar.
• Vista previa en vivo anclada a izquierda-a-derecha. Un desplazamiento X positivo siempre desplaza la sombra a la derecha, así que la vista previa se fuerza LTR independientemente del idioma de la página.

Ejemplo práctico#

La página carga con un botón índigo elevado ya hecho. Su sombra son dos capas: un borde de expansión -1px ajustado abrazando el botón y un lavado más ancho y más tenue más lejos. El CSS generado exacto:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

Fíjate en que las dos capas trabajan juntas: la primera (4px 6px de desenfoque, -1px de expansión, 0.2 de alfa) define el borde de contacto nítido; la segunda (10px 15px de desenfoque, -3px de expansión, 0.102 de alfa) aporta la elevación ambiental. Baja el alfa y la sombra se vuelve un sello negro y plano; sube la expansión y el botón parece flotar demasiado alto.

Para un estado pulsado, limpia esas capas y añade una sola: Interior activado, desplazamiento 0/2, desenfoque 4, expansión 0, color #00000033. La salida se vuelve inset 0 2px 4px rgba(0, 0, 0, 0.2): el elemento ahora parece hundido en la superficie, perfecto para un estilo :active.

Preguntas frecuentes#

¿Por qué el color sale como rgba(...) cuando yo escribí un hex?#

Cuando tu hex tiene un canal alfa (8 dígitos, como #00000033), la herramienta lo serializa como rgba(r, g, b, a) porque es la forma que la mayoría de las herramientas CSS y los navegadores antiguos analizan de forma fiable. Un color totalmente opaco (sin alfa, o alfa en FF) se queda como el #RRGGBB compacto. Ambos se renderizan idénticos a lo que ajustaste; se trata puramente de qué notación es más robusta aguas abajo.

¿En qué orden se pintan las capas?#

La primera capa de la lista se pinta encima, la última al fondo. Para una elevación natural, pon la capa aguda, oscura y cercana primero y la capa suave, clara y lejana segunda: así el borde de contacto ajustado no queda sepultado por el lavado ambiental. Reordena con Subir la capa / Bajar la capa hasta que la vista previa se lea bien.

Desenfoque o expansión: ¿cuál es la diferencia?#

Desenfoque suaviza el borde de la sombra (un degradado de color completo a transparente). Expansión hace crecer o encoge la sombra entera una cantidad fija antes de aplicar el desenfoque: una expansión positiva la hace más grande y más sólida; una expansión negativa la roe y es el secreto de un borde ajustado y profesional en una capa de desenfoque ancho. Un error común es recurrir solo al desenfoque y obtener una nube hinchada; añadir -2px o -3px de expansión la devuelve a su forma.

¿Puedo usar esta sombra en un div, no en un botón?#

Sí. El CSS funciona en cualquier elemento que acepte box-shadow: copia solo la línea box-shadow: (o la regla entera renombrada a tu selector) y deja caer las declaraciones específicas de botón que no necesites. La salida HTML solo es relevante cuando de verdad quieres un <button>.