Imagine adding depth, dimension, and a touch of creativity to your website. With shadows, you can create captivating visual effects that breathe life into your web designs.
In this concise guide, you will learn about CSS shadows and how to use them to create beautiful effects that will make your web design visually attractive. Whether you are a beginner or an experienced front-end developer, this detailed guide will show you how to effectively use shadows to transform ordinary elements into eye-catching ones, making your webpage more interactive and engaging.
Table of Contents
- What are CSS Shadows?
- The Importance of Understanding Shadows
- Box Shadow
- Inner Shadow
- Text Shadow
- Filter: drop-shadow()
- Pseudo Elements
- Layering Shadows
- Neumorphism
- Neon Shadow Effects
- Animating Shadows
- Browser Support for Shadows
- Tips for Using Shadow
- Conclusion
Prerequisites
To understand shadows effectively, you should have a basic understanding of HTML and CSS. If any of these concepts are new or unfamiliar, take some time to review them before proceeding.
What are CSS shadows?
CSS shadows are visual effects that are created by adding shadows to elements on a website using CSS. Shadows can convey the illusion of elevation, giving the impression that different components on a page are floating above the background at various levels. When used properly, shadows add depth and dimension to components, enhancing the overall aesthetic and user experience of a webpage.
In the image above, the first box has no shadow while the second one has a box shadow. The second box seems to be popping out of the screen making it stand out compared to the first box. In short, shadows can make your elements pop, hover elegantly, or cast an enchanting ambiance over your content.
The Importance of Understanding Shadows
With a solid understanding of shadows, you can elevate your website design with beautiful visual effects that capture users' attention. You'll be able to create shadow effects ranging from subtle drop shadows to floating elements and layered shadows, creating an immersive user experience.
However, it's not just about creating pretty visuals. When you understand how to use shadows, you can add extra value to your user interface by guiding the user's attention to the most important elements. This makes it easier for them to navigate your website.
Box Shadow
With the CSS box-shadow property, you can add shadow effects around an element's frame. This property creates a drop shadow that makes an element appear raised above a page or hovering over it. You can apply the box-shadow property to many elements, such as cards, buttons, and any other elements where the shadow needs to conform to the shape of the element's box. The syntax for box-shadow is as follows:
.box {
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
}
.box {
box-shadow: [x-offset] [y-offset] [blur-radius] [spread-radius] [color];
}
The properties of box-shadow include:
X-offset: This is the horizontal position of the box shadow of an element. This property specifies how far right or left the shadow goes. The shadow moves to the right with a positive value but moves to the left with a negative value.
Y-offset: This is the vertical position of the box shadow of an element. This property specifies how far up or down the shadow goes. The shadow moves down with a positive value but moves up with a negative value.
Blur radius: This is an optional property that determines the blurriness or softness of the shadow edges. The blur radius determines how much the shadow spreads out from its origin. Adding a lower value will make the shadow look more defined and sharper, while a higher value will make the shadow softer and more diffused.
Spread radius: This is also an optional property that specifies the shadow size of an element. The spread radius contracts and expands the shadow size from its origin. To make the shadow larger, use a positive value and a negative value to make it smaller.
-
Color: This property is used to set the color of the shadow. If the color value is not specified, the shadow will inherit the foreground color (text color). You can use various formats to specify the color. For instance:
- Named colors such as
blue - Hexadecimal values such as
#FF0000 - RGBA values such as
rgba(0, 0, 0, 0.12) - HSL values such as
hsl(0, 50%, 70%)
- Named colors such as
Check out Chris Coyier's box shadow examples:
Inner Shadow
The box-shadow property can also be used to create an inner shadow for a sunken effect. Instead of casting a shadow around an element's frame to make it look elevated, the shadow appears inside the element, making it look pressed in. To create an inner shadow, use the inset keyword as part of the box-shadow property. This keyword can be placed at the beginning or end of the syntax. For example:
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) inset
box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
The result:
See another example:
Text Shadow
The text-shadow property allows you to add a shadow effect to text elements on a webpage. This property creates a shadow behind the text, adding depth and enhancing its visual appeal. The properties include x-offset, y-offset, blur radius, color, and inset.
.text {
text-shadow: 5px 5px #9b0707;
}
The result:
To achieve a 3D-like effect for the text above, you can add multiple shadows separated by commas:
.text {
text-shadow: 1px 1px #9b0707,
2px 2px #9b0707,
3px 3px #9b0707,
4px 4px #9b0707,
5px 5px #9b0707,
6px 6px #9b0707,
7px 7px #9b0707,
8px 8px #9b0707,
9px 9px #9b0707,
10px 10px #9b0707;
}
The result:
.text {
text-shadow: 0px 0px 10px #9b0707;
}
The result:
Notice the subtle, soft shadow around the text above.
Check more examples below:
Filter: drop-shadow()
The CSS "drop-shadow" filter is a powerful tool that can be used to create drop shadow effects on images, text, and other elements. Unlike the box-shadow property, this filter actually contours the shape of an element, giving you more flexibility in creating a wide range of effects, such as realistic shadows, glows, and outlines.
.box1 {
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
}
.box2 {
filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.5));
}
The result:
From the example above, we can see that the syntax for the box-shadow and drop-shadow() filter looks similar, however, they produce different shadows. This is due to the fact that the drop-shadow() filter adheres to the rendered shape of any element. For example:
And another example:
Pseudo Elements
You can also create shadows with the ::before and ::after pseudo-elements. These selectors enable you to add extra content to your webpage without changing the HTML structure, giving you more flexibility. Other pseudo-elements, such as ::first-letter and ::first-line, also support shadows, but ::before and ::after are the most commonly used.
See Ramsey Njire's shadows with pseudo elements:
And Jhey's box-shadow pseudo loaders:
Layering Shadows
Using a single box shadow is fantastic, but you can layer multiple shadows on each other, separated by commas. This technique enables you to create a more realistic or three-dimensional look. By stacking shadows, you can achieve the illusions of different opacity levels, light sources, and even reflections.
.single-box {
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3);
}
.layered-box {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075),
0 2px 2px rgba(0, 0, 0, 0.075),
0 4px 4px rgba(0, 0, 0, 0.075),
0 8px 8px rgba(0, 0, 0, 0.075),
0 16px 16px rgba(0, 0, 0, 0.075);
}
The result:
You can also stack shadows for the drop-shadow() filter by separating them with space instead of commas. For example:
.box {
filter:
drop-shadow(0 2px 2px #555)
drop-shadow(0 6px 5px #777)
drop-shadow(0 12px 10px #999);
}
When layering shadows, you can adjust the properties of each shadow layer to create an intriguing effect. Additionally, it is essential to consider the stacking order of the shadows, as they will be arranged in the sequence in which they are defined.
Neumorphism
Neumorphism is a design trend characterized by minimal and real-looking UI elements. It's often referred to as a modern approach to skeuomorphism that replicates real-life objects within a digital interface. Neumorphism aims to create digital elements that resemble tangible objects, giving them a sense of depth while avoiding complexity and cluttered designs. For example:
.box1 {
box-shadow: -5px -5px 9px #ffffff73,
5px 5px 9px #6e7a8f4d;
}
.box2 {
box-shadow: inset -5px -5px 9px #ffffff73,
inset 5px 5px 9px #6e7a8f4d;
}
The result:
Neumorphic UI elements are designed to have a 3D-like effect, appearing connected to the background. They create the illusion of an element protruding from or embedded into the background, achieved through soft shadows. That's why they're sometimes called "soft UI" elements. The overall result is a subtle yet eye-catching design.
In neumorphic design, elements are typically placed against a neutral background, allowing them to stand out and providing a more realistic and tactile feel to the digital interface.
A neumorphic preloader:
Neon Shadow Effects
The neon shadow is a popular CSS technique that allows you to create stunning, eye-catching visuals using bright neon colors. This technique can be applied to elements and text for vibrant and glowing effects.
.box1 {
box-shadow: 0px 10px 15px 0 rgba(0, 255, 98, 0.7);
}
.box2 {
box-shadow: inset 0px 10px 15px 0 rgba(0, 255, 98, 0.7);
}
The result:
A dark background will make the shadow stand out more prominently, while a light background will create a more subtle effect. When creating a neon shadow effect, you can use the box-shadow or text-shadowproperty.
Neon shadow effect using the box-shadow property:
Another one with the text-shadow property:
Animating Shadows
Animating shadows can add a dynamic and lively touch to your user interface or webpage. With CSS animations such as keyframes, transforms, and transitions, you can create shadows that move, expand/shrink, or change color over time.
When you animate shadows, it catches users' attention and highlights the interactive elements on your page, making it easier to navigate and understand your interface. For example, you could create a button that appears to press down when clicked or a card that seems to rise when hovered over.
For optimal performance, avoid animating the box-shadow property directly. However, you can achieve a similar effect by animating the filter: drop-shadow() property. Also, using the ::after pseudo-element with a box-shadow and animating its opacity will give you the smoothest animation possible. While there are many elements you can animate, remember that the key to effective animation is to strike a balance between creativity and usability. Don't hesitate to experiment with shadow animations, as the possibilities are endless.
Browser Support for Shadows
It's essential to note that browser support for shadows can vary. While most modern browsers support shadows, some earlier versions may only partially support them or not support them at all. Browsers that do not support shadows will simply omit them without displaying any effect. Examples of browser versions that do not support shadows include Chrome 9, Internet Explorer 8, Firefox 3.6, and Safari 3, as well as their earlier versions.
To ensure proper rendering of your shadows across all platforms, you may use the vendor prefixes such as:
- webkit for Chrome and Safari
- moz for Firefox
- o for Opera
- ms for Internet Explorer (IE)
.card {
-webkit-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
}
Tips for Using Shadows
Before diving into shadows or incorporating them into your designs, it's crucial to consider a few points to make the most of them:
Keep it Subtle: When using shadows, it's important to prioritize visual balance and accessibility. Applying too many shadows can make an element appear cluttered or make text hard to read. Therefore, use shadows sparingly to add depth and value, and avoid creating overly complex or chaotic designs.
Layering Shadows: Layered shadows are undoubtedly stunning, but they come with a cost. Adding too many layers of shadows or applying them to multiple elements can impact performance, especially on mobile devices and older browsers. So, layer shadows minimally to enhance performance.
Blurring Shadows: When using the blur radius, it's essential to strike the right balance. Too much blurring can make the shadow look fuzzy and lose definition, while too little may not create the effect you desire. Additionally, shadows with heavy blur tend to render slowly.
Performance Optimization: It's always a good practice to test your designs on different browsers and devices to ensure smooth performance. You can use the DevTools in your browser to identify any performance issues and make necessary adjustments to your shadows.
Use a Shadow Layering Tool: A shadow-generating tool can be a helpful resource for experimenting with different shadow effects and creating complex shadow styles. You may check out Philipp Brumm's shadow generator - shadows.brumm.af.
Conclusion
It's fascinating to see how something as simple as a shadow can make a big difference in creating captivating designs. Throughout this guide, we covered various aspects of CSS shadows, including box shadow, inner shadow, text shadow, drop-shadow filter, pseudo-elements, layering shadows, neumorphism, neon shadows, animating shadows, browser support, and tips for efficient use. By mastering these techniques, you can unleash your creativity in web design.
Remember, the key is to experiment and explore new possibilities. When you put in the extra effort to create unique shadows, your designs will truly stand out. I hope you found this guide both beneficial and enjoyable.
Top comments (2)
Amazing details... Loved how you covered of how to create all the shadows types.
However, Could you also write wwhere and when to use these shadow..
Like the what is process in design to use shadows bases on requirements of the feature/task/app
Thank you. You can add shadows to many elements such as buttons, cards, and text.