Nowadays, it’s not enough that a website does its job — it has to take the user on a journey, an aesthetically pleasing journey of hues, fonts, shades, and everything in between. Websites have to look and feel realistic, and shadows play a big part. In this post, we’ll look at the
We’ll also cover:
This is intended for frontend developers with a working knowledge of HTML and CSS. You should also be familiar
with the What is the box-shadow property?The Our eyes are used to seeing shadows. They give an idea of an object’s size and depth, and the Let’s look at how a typical box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) The first four values are:
All of these except the blur radius can be negative values. For
instance, the snippet above will place the box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5) The spread value set at Making the shadows feel realisticThe next value is the color. We’ll be using When styling the The area closest to the object has the darkest shadows, then it spreads and blurs outwards gradually. Opaque or completely black shadows would be distracting, ugly, and imply a complete blockage of light, which isn’t what we’re after. Avoid the dropshadow() filterThis is a filter that adds a drop shadow around an image. It’s not the same as
The below code snippet shows the distinction between these filters. box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3); filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3)); Basics with box-shadowsTo get started, first create a simple box container with HTML: <body> <div class=box> </div> </body> Next, the CSS: div{ height: 150px; width: 150px; background: #fff; border-radius: 20px; } .box{ box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); } This will be the output: Using box-shadow with the :hover pseudo class and transform propertyThe More great articles from LogRocket:
.box:hover{ box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5); transform: translateY(-5px); } The The .box2{ box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.5); } .box2:hover{ transform: translateY(5px); box-shadow: inset 0px 10px 20px 2px rgba(0, 0, 0, 0.25); } Basically, you can play with the values until you get what you like. This is what the final shadows will look like using these examples: See the Pen An alternative to the Let’s demonstrate. On the second box, add the .box2:hover { transform: scale(1.1); box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.25); } This will increase the size of the box by 1.1x the original size. See the Pen You don’t want ugly, botched, or boring shadows that look amateurish on a webpage. There are a number of ways to
improve the look of the Creating layered shadows with CSS box-shadowYou can stack multiple shadows on top of each other by separating their values with commas. This technique can be used to create interesting shadows that blend smoothly into the page. Let’s demonstrate with CSS: box-shadow: 0px 1px 2px rgba(0,0,0,0.1), 0px 2px 4px rgba(0,0,0,0.1), 0px 4px 8px rgba(0,0,0,0.1), 0px 8px 16px rgba(0,0,0,0.1); Notice the spread value isn’t added — it’s
not really needed in this case, but ultimately, it’s up to you to decide how your If we set the offset and blur radius to box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.5), 0px 2px 4px rgba(0,0,0,0.1), 0px 4px 8px rgba(0,0,0,0.1), 0px 8px 16px rgba(0,0,0,0.1); Since this border is technically a shadow because no extra space is taken up by the box in the parent element. This is what the output will look using these two techniques: Notice the smooth subtle shadow on the left box. The box on the right shows the shadow border. Now, let’s look at the See the Pen Build a simple webpage like the one shown in the demo, and try styling the Creating neon shadows with CSS box-shadowReal-life shadows are usually black or gray, with varying amounts of opacity. But what if shadows had colors? In the real 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 Let’s change the color on our first example: .box{ box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.7); } .box2{ box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.7); } This is the output: See the Pen You can get a more vibrant glow by layering the shadows: box-shadow: 0px 1px 2px 0px rgba(0,255,255,0.7), 1px 2px 4px 0px rgba(0,255,255,0.7), 2px 4px 8px 0px rgba(0,255,255,0.7), 2px 4px 16px 0px rgba(0,255,255,0.7); The best way to showcase colored shadows, especially neon ones, is on a dark-themed webpage. Dark themes are very popular and this effect can complement it nicely if you use the right colors. All the heavy lifting has been done in the previous examples, so let’s darken the earlier site demo and see the result! See the Pen It’s best to use colors that
contrast well, as we’ve done in this demo. The blue Creating neumorphic shadows with CSS box-shadowThis effect is unique and visually pleasing. It came from skeuomorphism, which tried to replicate objects exactly as they would appear in real life. There are some examples in the linked article on skeuomorphism, but a quick example is the early Apple device UI. The first two effects we need to create deal with flat web components that seem to float above the page and cast shadows on the background. This effect makes these components look like they extrude from the page. box-shadow: -10px -10px 15px rgba(255,255,255,0.5), 10px 10px 15px rgba(70,70,70,0.12); We can also place them on the inside: box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.12); There are two box-shadows working opposite each other in the above example. The white See the Pen Neumorphic design mimics real life objects. It doesn’t entirely replicate things, but it looks real enough, like you could reach out and touch it. Now let’s create something cool, a push switch using a checkbox. To get started, create a checkbox input. <body> <input type="checkbox" /> </body> Now for the CSS: input[type="checkbox"] { height: 200px; width: 200px; top: 50%; left: 50%; -webkit-appearance: none; box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5), 10px 10px 15px rgba(70, 70, 70, 0.12); position: absolute; transform: translate(-50%, -50%); border-radius: 50%; /*Makes the circle*/ border: 20px solid #ececec; outline: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } Next, adding the icon. I got this particular icon from Font Awesome. Link the CDN and copy the icon’s Unicode. input[type="checkbox"]::after { font-family: FontAwesome; content: "\f011"; /*ON/OFF icon Unicode*/ color: #7a7a7a; font-size: 70px; } Set the properties for when the button is clicked. We’re adding the input[type="checkbox"]:checked{ box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5), 10px 10px 15px rgba(70, 70, 70, 0.12), inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.12); } Finally, set the color of the icon after the click. input[type="checkbox"]:checked::after{ color: #15e38a; } The result: See the Pen CSS box-shadow browser supportIt’s important to note that the -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);/*For webkit browsers*/ -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);/*For Firefox*/ box-shadow: 1px 1px 0px rgba(0,0,0,0.1); This property is partially supported in Chrome from version 4 to 9, using the prefix For Mozilla Firefox, versions 2 and 3 do not support CSS The now-retired Internet Explorer supports this property from versions 9, 10, and 11, and is also supported on all versions of its successor, Microsoft Edge. The
Safari browser versions 3.1 and 4 partially support this property with the prefix If a browser doesn’t support shadows, they are just omitted from the webpage with no effect on the layout. Tips on using box-shadowThe Less is moreWhen layering shadows, the browser does more work. This might not be an issue on fast modern devices, but you always have to consider users with older, slower devices or poor internet connections. Be consistentYou can’t have your shadows looking haphazard! All your shadows should look similar because you should be using a single light source. Use animations sparinglyA quick way to reduce
performance is by animating the Animations can be a simple Use a shadow layering toolNow, if you don’t feel like writing multiple lines of code, you’re tired, or just feeling lazy, there’s a great tool at shadows.brumm.af that can help you create layered shadows. It
allows you add as many as 10 Simply set the properties, preview the ConclusionWe’ve looked at how to layer shadows, how to create neon shadows and transform them into highlights, and how to bring realism online with neumorphic shadows. You’re well on your way to becoming a shadow expert! Practice
makes perfect, so try styling some shadows yourself. See how many Is your frontend hogging your users' CPU?As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket. https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors. Modernize how you debug web and mobile apps — Start monitoring for free. |