CSS shadows are often used to add depth to a design, but they can be used for more than just that. In this article, we will explore different ways to use shadows in CSS to create interesting hover effects, unique text styles, and even shadows on other shadows.

While post-modern web design tends to minimize the use of shadows, CSS shadows are still valuable and have become more adaptive. They are a useful design element that adds depth to a two-dimensional web design. However, they can also be stacked, animated, and manipulated in ways that go beyond their primary role.

The article presents several “tricks” discovered through shadow experiments. The first trick involves using inset shadows to create an overlay hover effect for image transitions. By applying an inset shadow with no blur to an element’s background, a “veil” effect can be created. This effect is demonstrated using a green circle with a red inset box-shadow that is removed on hover to reveal the green background.

The second trick explores the concept of creating a shadow of a shadow. By combining box-shadow and drop-shadow() filters, interesting effects can be achieved. For example, a Venn diagram shape can be created by applying a box-shadow to an element and adding drop-shadow() layers to it.

The final trick involves using the CSS text-shadow property to manipulate text and emoji. By setting the color of the text to transparent and applying a shadow, the text appears as a solid color icon. This technique can be used to quickly create an icon system without drawing or working with files.

Overall, these experiments demonstrate the versatility of CSS shadows and provide inspiration for further exploration. Shadows and gradients are essential CSS features for creating visual effects, and their wide browser support allows for endless possibilities in design.