Cómo crear sombras con CSS
En diseño web debemos tener recursos a mano que podamos aplicar con CSS en nuestra tienda online o a la hora de crear una página web, y uno de los más prácticos y vistosos son las sombras. No siempre utilizarás todas sus posibilidades en un diseño en particular, pero cuantos más conozcas más opciones de personalización podrás aplicar a tus trabajos.
Las sombras CSS son una utilísima herramienta para aplicar un toque diferente a los elementos de la página, creando también un efecto de profundidad cuando lo desees.
Tipos de sombras CSS
Comencemos viendo cómo se desarrolla el CSS para crear sombras, aclarando también que existen dos tipos de sombra:
Sombras CSS para las cajas
Tenemos sombras para los elementos en general, que se aplicará sobre la «caja» del elemento. Estas se consiguen con el atributo box-shadow y la sintaxis sería la siguiente:
box-shadow: 1px 1px 1px 1px rgba(32,32,32,0.3);
Por orden de aparición, los valores de unidades entregadas a box-shadow son los siguientes:
- Desplazamiento de la sombra en la horizontal
- Desplazamiento de la sombra en vertical
- Desenfoque de la sombra
- Propagación de la sombra
- Color aplicado
Los 4 valores iniciales los podemos entregar en distancia, por ejemplo píxeles. El último valor será un color. El color puede ser un RGB normal, pero es muy habitual que acabemos usando un RGBA porque le aplicará también una transparencia en el color de la sombra.
Sombras CSS para el texto
Por su parte, existen sombras CSS que se pueden aplicar sobre el texto del elemento, mediante las que se pueden conseguir otros tipos de efectos. Aquí utilizamos el atributo text-shadow.
text-shadow: 1px 1px 1px rgba(32,32,32,0.3);
De nuevo, los valores por orden de aparición son los siguientes:
- Desplazamiento en la horizontal
- Desplazamiento en la vertical
- Desenfoque
- Color de la sombra
Cómo crear diferentes efectos con sombras CSS
Si lo que queremos es crear efectos vistosos con las sombras CSS podemos trabajar con tres principales alternativas que vamos a tratar ahora por separado. Las veremos con las sombras para las cajas, pero básicamente podrías hacer lo mismo con los textos.
Cómo crear efecto 3D con sombras CSS
El primer efecto que podemos conseguir es la separación entre las cajas y el resto de la página. Para ello, podremos aplicar un desplazamiento de la sombra unido con un degradado.
El degradado siempre lo podemos asignar un poco mayor que el desplazamiento, para conseguir que la sombra no sea demasiado sólida. Unido a un color de la sombra con valor RBGA para transparencia conseguiremos efectos bastante atractivos. Aquí tenemos varias reglas CSS para sombras, que aplicadas a cajas conseguirán el mencionado efecto de separación, emulando un poco el 3D.
.separar0 {
box-shadow: none;
}
.separar1 {
box-shadow: 2px 2px 4px 0 rgba(20, 20, 20, 0.3);
}
.separar2 {
box-shadow: 7px 7px 12px 0 rgba(20, 20, 20, 0.3);
}
.separar3 {
box-shadow: 14px 14px 20px 0 rgba(20, 20, 20, 0.3);
}
Aplicadas estas clases a 4 cajas, quedarían más o menos como aparece en la siguiente imagen: 
Cómo crear efecto de sombra interior CSS
Es posible aplicar una sombra al interior del elemento con el valor «inset». Para las sombras en el interior de los elementos es preferible ser bastante conservadores y no pasarse de desplazamiento o degradado de la sombra, porque podría afectar a la visibilidad del contenido de las cajas. Incluso podemos trabajar únicamente con un poco de degradado sin aplicar desplazamiento, para que el sombreado sea equitativo en todos los lados de la caja.
El valor «inset» lo aplicamos en la propiedad box-shadow, de la siguiente manera.
.interior1 {
box-shadow: inset 1px 1px 4px 0 rgba(20, 20, 20, 0.2);
}
.interior2 {
box-shadow: inset 0px 0px 10px 0 rgba(20, 20, 20, 0.2);
}
Estos efectos aplicados tendrían más o menos este aspecto.
Cómo crear varias sombras CSS al mismo tiempo
Es posible aplicar distintos valores de sombra al mismo tiempo sobre las cajas o textos de la página. Esto nos puede ayudar a conseguir toda una variedad de nuevos efectos, por ejemplo sombras de distintos colores o sombras con una propagación en colores diferentes.
Para aplicar más de una sombra simplemente separamos las distintas especificaciones de cada sombra separadas por comas. Podemos poner tantas como queramos, mezclando desplazamientos, desenfoques y propagaciones distintas, así como colores. En estos ejemplos puedes ver sombras que mezclan varios colores, para conseguir un efecto muy particular.
.colorear1 {
box-shadow: -1px -1px 6px 0 rgb(122, 221, 102), 4px 4px 16px 2px rgb(92, 162, 235);
}
.colorear2 {
box-shadow: 2px 2px 8px 0 rgb(209, 102, 221), 4px 4px 16px 0 #d66, 0px 0px 24px 2px rgb(221, 197, 102);
}
Observarás que no se trata de definir varias declaraciones box-shadow, pues en ese caso estaríamos simplemente sobrescribiendo la sombra. En realidad es una única declaración a la que le hemos añadido diversas sombras separadas por comas. El efecto que conseguimos mediante ese código se puede ver en la imagen siguiente.
Conclusiones sobre sombras CSS
Añadir sombras no es sólo una técnica visual, sino que podrás añadir profundidad y realismo a los elementos de tu página web además de mejorar la legibilidad y la claridad del contenido.
Desde aquí te animamos a practicar con este efecto y a profundizar más en técnicas similares, ya que cuidar la estética de una web es uno de los requisitos para consolidar tu marca y retener a los visitantes que accedan a ella. Y si quieres ofrecer una experiencia de usuario óptima, no te olvides de elegir un dominio personalizado y un hosting web confiable que te asegure la estabilidad de tu proyecto.
Eso es todo lo que necesitas saber sobre la creación de sombras con CSS. ¡Ahora simplemente necesitas practicar! ¡Déjate llevar por tu creatividad para mejorar el diseño web!
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.