Generar sombras CSS con Chrome DevTools
Clase 6 de 22 • Curso de Debugging con Chrome DevTools
Resumen
Aprende a aplicar sombras en CSS directamente con Chrome DevTools, sin depender de generadores externos. Ajusta orientación, blur y distancia en vivo sobre tus elementos y textos, copia el código listo y comprueba al instante si el diseño se ve bien en tu interfaz.
¿Cómo agregar sombras en CSS con Chrome DevTools?
Trabajar desde DevTools acelera el flujo: seleccionas el elemento, activas los controles de sombra y ves el resultado en tiempo real. El ejemplo parte de una imagen a la que se le define width de 60 píxeles y luego se le añade sombra con controles visuales (orientación, blur, distancia). No necesitas cambiar de pestaña ni buscar un generador; el código se obtiene ahí mismo y puedes copiarlo al final.
¿Qué controles usar para la sombra?
- Orientación: ajusta la dirección del desplazamiento de la sombra.
- Blur: controla qué tan difuminada luce la sombra.
- Distancia: define la separación entre el elemento y su sombra.
- Color: además del box-shadow, puedes tocar background-color y color de fuente si lo requieres.
/* Ejemplo base desde DevTools */
img {
width: 60px; /* definido en la interfaz de estilos */
/* box-shadow: ... (generado por Chrome DevTools) */
}
¿Cómo seleccionar el elemento correcto y evitar conflictos?
Es clave identificar la estructura anidada: lista de elementos, un enlace (etiqueta ancla) y dentro una imagen. Para que la sombra afecte lo correcto, selecciona directamente la etiqueta cuando la sombra sea para la imagen. Si el objetivo es el texto del enlace, selecciona el correspondiente.
- Selecciona con precisión el nodo en el panel de elementos.
- Verifica si la imagen está dentro de un enlace.
- Aplica la sombra donde corresponde: al
o al según el caso.
¿Cómo aplicar sombra al texto?
Cuando hay más de un enlace, evita ambigüedades creando una clase específica y aplicando la sombra a esa clase. Así controlas el alcance y no afectas otros enlaces.
/* Selector anidado de ejemplo para un enlace específico */
.nav .nav-right-section a {
/* text-shadow: ... (generado por Chrome DevTools) */
}
/* O con clase dedicada para mayor control */
a.enlace-con-sombra {
/* text-shadow: ... (generado por Chrome DevTools) */
}
- Usa un selector anidado cuando el enlace esté dentro de secciones como nav y contenedores.
- Asigna una clase al enlace si necesitas precisión total.
- Genera el text-shadow desde el panel de estilos y ajusta blur y distancia.
¿Qué ventajas ofrece ajustarlo en vivo y cómo finalizar?
Trabajar las sombras en el contexto real del componente te permite decidir si se ve bien con el resto del diseño. Es más confiable que un generador genérico, porque la vista previa es sobre el elemento exacto que necesitas y con el resto de estilos ya cargados.
- Evitas saltar entre pestañas y copiar-pegar innecesario.
- Compruebas el comportamiento visual inmediato en tu interfaz.
- Aseguras consistencia con el resto de estilos ya aplicados.
- Copias el código y lo pegas en tu editor de texto.
- Guardas los estilos y confirmas el resultado al renderizar el proyecto.
¿Tienes dudas sobre box-shadow o text-shadow en tu caso de uso? Cuéntame en los comentarios y afinamos la configuración paso a paso.