Menu Close

Styling CSS box-shadow effects in 3 ways

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:

  1. Layered shadows
  2. Neon shadows
  3. 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.

Leave a Reply

Your email address will not be published.

Oti is a vastly experienced digital media and marketing professional with over 10 years of industry experience. He has worked across Agency, Brand, Publisher and Marketing Technology sides of the industry in various capacities.


Driven by a strong commitment to continuous innovation, Oti has managed so many successful digital projects across Africa and Europe for brands like Coca-Cola, Nestle, Guinness, Kellogg’s, EA Games, Sony Entertainment, etc., and advises senior management of global brands on data-driven marketing and digital transformation.

Consumer insights in marketing: Oti

Oti currently heads Product at Terragon Group, Africa’s leading data aggregation, enrichment, and activation company, where he is responsible for developing innovative data-driven marketing solutions for SMBs and Enterprises across Africa.


Oti is the current President of Association of Digital Marketing Professionals (ADMARP), the foremost professional body for digital marketing practitioners in Nigeria. He is also a communications consultant to the African Union in areas of youth engagement and digital interactions. A known public speaker, teacher and trainer, Oti has facilitated several conferences and digital events, and was recognized by Marketing Edge Magazine as an Outstanding Digital Marketing Personality of the year 2021.

Open chat
Hello there, I'm Kayode
Welcome to WSI Axon. We are a full service Digital Marketing Agency providing digital solutions to businesses.

Please tell us your name, and how we can help you today.