Nowadays, it’s not enough that a website does its function — it has to take the viewer on a voyage, an aesthetically beautiful tour of hues, fonts, tints, and everything in between. Websites have to appear and feel natural, and shadows play a key factor.
In this blog, we’ll look at the box-shadow CSS property and how you can style it in three distinct ways:
- Layered shadows
- Neon shadows
- Neomorphic shadows
This is aimed at front-end developers with a working knowledge of HTML and CSS. You should also be familiar with the box-shadow property.
What is the box-shadow property?
The box-shadow attribute feature allows you add a shadow around an element on a webpage. It can notify us if an element like a button, navigation item, text or image card is interactive.
Our eyes are used to seeing shadows. They convey a feeling of an object’s scale and depth, and the box-shadow adds this reality into our online experience. When styled appropriately, it can improve the looks of the webpage.
Let’s look at how a normal box-shadow in stated in CSS:
box-shadow: 0px 5px 10px 0px rgba (0, 0, 0, 0.5)
The first four values is the code shown above:
The y – offset, which represents the shadow’s position vertically
The x – offset, which represents a horizontal shadow position
The blur radius, which affects the sharpness of the shadow; higher values mean lighter shadows, and vice versa
The fourth value defines the spread
All of these except the blur radius can be negative numbers. For instance, the snippet above will set the box-shadow on the bottom of the element, but if you add negative numbers like below, the shadow will be on top:
box-shadow: 0px -5px 10px 0px rgba (0, 0, 0, 0.5)
The spread value set at 0px will make the shadow the same size as the box; a positive value will expand its size and a negative value will decrease it.
Avoid the drop-shadow () filter
This is a filter that creates a drop shadow around a picture. It’s not the same as box-shadow, which is vital to note when applying shadows to visuals.
The following code sample highlights the distinction between these filters.
box-shadow: 5px 5px 5px 0px rgba (0, 0, 0, 0.4);
filter: drop-shadow (5px 5px 5px 0px rgba (0, 0, 0, 0.4));
Basics with box-shadows
To get started, first make a simple box container with HTML:
<body>
<div class=”bx1″>
</div>
</body>
CSS Next,
.bx1 {
box-shadow: 0px 5px 10px 0px rgba (0, 0, 0, 0.5);
}div {
background: #fff;
width: 150px;
height: 150px;
border-radius: 20px;
}
Output >
Using box-shadow with the transform and :hover pseudo class property
The box-shadow can also be changed by the :hover pseudo class. You may add a shadow to a component that didn’t previously have one, or make adjustments to an existing shadow. In this example, the transform property alters our shadow.
.box:hover {
box-shadow: 0px 10px 20px 5px rgba (0, 0, 0, 0.5);
transform: translateY (-5px);
}
The transform feature aids the illusion of the box being dragged further off the page. In this example, the translate () method is used to resize the box.
The inset keyword can be added to put the shadow within the frame of the box or element. The box will appear to have sunken into the page.
.bx2 {
box-shadow: inset 0px 5px 10px 0px rgba (0, 0, 0, 0.5);
}
.bx2:hover {
transform: translateY (5px);
box-shadow: inset 0px 10px 20px 2px rgba (0, 0, 0, 0.25);
}
Basically, you can experiment with the values until you achieve what you prefer. This is what the final shadows will look like using these examples:
See the Pen
Untitled by drizzy009 (@drizzy009)
on CodePen.
Creating the layered shadows with CSS box-shadow
You can stack many shadows on top of each other by separating their values with commas. This technique can be used to generate fascinating shadows that blend easily into the page.
Let’s show it with CodePen:
Checking CodePen CSS you should notice that the spread value isn’t added – it’s not really needed in this instance, but ultimately, it’s up to you to decide how your box-shadow appears.
If we set the offset and blur radius to 0px and add a spread value to one shadow, we will add a border to the box.
Since this border is technically a shadow because no extra space is taken up by the box in the parent element.
See the Pen
Untitled by drizzy009 (@drizzy009)
on CodePen.
Creating neon shadows with CSS box-shadow
Real-life shadows are usually black or gray, with variable amounts of opacity. But what if shadows had colors?
In the actual world, you get colored shadows by changing the color of the light source. There’s no “real” light source equivalent to change on a website, so you get this neon effect by changing the color value on the box-shadow.
Review this CodePen example:
See the Pen
Untitled by drizzy009 (@drizzy009)
on CodePen.
The ideal method to highlight colored shadows, especially neon ones, is on a dark-themed webpage. Dark themes are highly popular and this effect can complement it wonderfully if you use the proper colors.
Creating neumorphic shadows using CSS box-shadow
This effect is distinctive and visually pleasant. It came from skeuomorphism, which aimed to imitate objects exactly as they would appear in real life. There are some examples in the linked article on skeuomorphism, but a fast example is the early Apple device UI.
See the Pen
Untitled by drizzy009 (@drizzy009)
on CodePen.
Neumorphic design mirrors real life objects. It doesn’t exactly mimic objects, but it seems real enough, like you could reach out and touch it.
Conclusion
We’ve looked at how to use “layer shadows”, how to make “neon shadows” and turn them into highlights, and how to use “neumorphic shadows” to add realism to your images. You’re well on your way to becoming adept in shadows!
As they say, practice makes perfect, so test your skills at some shadow styling. Determine how many box-shadow layers you can apply to an element. Experiment with different color combinations to see what works best. To ensure optimal performance, test on as many devices as possible.
