2023-10-25

#css

Oscar Jite-Orimiono

90735

Oct 25, 2023 ⋅ 11 min read

Styling with the CSS box-shadow property

Oscar Jite-Orimiono I'm a self-taught frontend web developer. I build websites so everyone finds a home online. The digital space is massive, full of endless possibilities — let's explore it together!

Editor’s note: As of 25 October 2023, this article now features CSS box-shadow generators and information about combining the box-shadow and text-shadow CSS properties.

Styling with the CSS box-shadow Property

Nowadays, it’s not enough that a website does its job — it has to take the user on 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 box-shadow CSS property and how you can style it in three different ways: layered shadows, neon shadows, and neumorphic shadows.

What is the `box-shadow` property?

The box-shadow CSS property allows you to add a shadow around an element on a webpage. Shadows give us an idea of an object’s size and depth, and box-shadow brings this realism into our online experience. The property can tell us if an element like a button, navigation item, or text card is interactive. When styled properly, it can also improve the aesthetics of the webpage.

Let’s look at how a typical box-shadow in declared in CSS:

box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)

The first four values are:

The x-offset, which represents the horizontal shadow position
The y-offset, which represents the shadow’s position vertically
The blur radius 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 values. For instance, the snippet above will place box-shadow on the bottom of the element, but if you add negative values like below, the shadow will be on top:

box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5)

An image demonstrating the effect of positive and negative offset values

The spread value set at 0px will make the shadow the same size as the box; a positive value will increase its size and a negative value will shrink it.

Adding color to make shadows feel realistic

The next value is color. We’ll be using rgba() colors because of their alpha value. With this, we can specify an opacity, which is an important aspect to consider when styling realistic shadows. Shadows in well-lit spaces aren’t black or completely opaque — you can see the color of the area the shadow is cast on.

When styling the box-shadow property, remember that transparent shadows are the best because they look good on multicolored backgrounds. Look around and observe how shadows behave in relation to their light sources — you’ll want to keep this in mind when styling with CSS:

Diagram demonstrating how to observe shadows in the real world

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.

Avoiding the `drop-shadow()` function

The drop-shadow() function adds a drop shadow around an image, following the shape of the entire element’s content. This means it can include any transparent areas. It differs from the box-shadow property, which applies shadows to the rectangle of the image’s box:

The drop shadow CSS filter versus the box-shadow CSS property

The code snippet below 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));

Getting started with `box-shadow`

To get started with box-shadow, first, create a simple box container with HTML:

<body>
    <div class=box>
    </div>
</body>

Next, add 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:

The basic box shadow we've created

Using `box-shadow` with the `:hover` pseudo-class and `transform` property

The box-shadow can also be affected by the :hover pseudo-class. You could add a shadow to a component that didn’t previously have one, or make changes to an existing shadow. In this example, the transform property modifies our shadow:

.box:hover{
  box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
}

The transform property helps the illusion that the box is being lifted further off the page. In this example, the translate() function is used to resize the box.

The inset keyword can be used to put the shadow inside the frame of the box or element. The box will appear to have sunk into the page:

.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);
}

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
Simple Box-shadow by Oscar-Jite (@oscar-jite)
on CodePen.

An alternative to the translate() function is scale(). While translate() changes the shadow position along the x- and y-axes, scale() increases the size of the box along the x- and y-axes.

Let’s demonstrate this. On the second box, add the scale() value on :hover:

.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
Translate and scale by Oscar-Jite (@oscar-jite)
on CodePen.

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 box-shadow and use it nicely and effectively — all of which I’ll explain in the following sections.

Combining the `box-shadow` property with `text-shadow`

Similar to box-shadow, by specifying the shadow’s blur radius, color, and offset in both the horizontal and vertical planes, you can add shadows to text using the text-shadow property. It gives you precise control over the shadow of the text, so you can make different kinds of visual effects. Here’s a basic syntax:

text-shadow: horizontal-offset vertical-offset blur-radius color;

While text-shadow is only applicable to text elements, it can be combined with the box-shadow property to create complex designs that not only make your text stand out but also add depth and dimension to the surrounding elements on your webpage.

You can apply box and text shadows to an element simultaneously to increase the element’s visual impact. Here’s an example of how you can combine these two CSS properties:

<div class="container">
    <p class="text">Logrocket</p>
</div>

We added the box-shadow and text-shadow properties to the text class. The box-shadow applies a shadow effect to the card. The two shadow layers with different colors and offsets create a sense of depth and a visually pleasing neumorphic effect.

Over 200k developers use LogRocket to create better digital experiences

Learn more →

Then, text-shadow creates a text shadow effect by applying two shadows with different offsets and opacity values, giving the text a shadow effect:

.container .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 12rem;
  border-radius: 50px;
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow:  20px 20px 60px #bebebe,
               -20px -20px 60px #ffffff;
  margin: 0 2rem;
  padding: 0 2rem;
  color: #764ABC;
  text-shadow: -6px 6px 15px rgba(0,0,0,0.5),
                6px -6px 15px rgba(255,255,255,0.8);
}

Here’s the result:

See the Pen
Combining text and box shadow by Miracle Jude (@JudeIV)
on CodePen.

Creating layered shadows

You 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 that the spread value isn’t added — it’s not necessary in this case, but ultimately, it’s up to you to decide how your box-shadow looks.

If we set the offset and blur radius to 0px and add a spread value to one shadow, we can add a border to the box:

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);

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 like using these two techniques:

Creating a layered box-shadow with CSS and borders

Notice the smooth subtle shadow on the left box. The box on the right shows the shadow border.

Now, let’s look at the box-shadow in a practical scenario. This property can be used on almost any element on a webpage, but the more common ones include the navbar, text cards, and images. It can also be added to input fields and buttons.

See the Pen
Layered shadow Page by Oscar-Jite (@oscar-jite)
on CodePen.

Build a simple webpage like the one shown in the demo, and try styling the box-shadow yourself!

Creating neon shadows

Real-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 box-shadow.

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
Neon Shadows by Oscar-Jite (@oscar-jite)
on CodePen.

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);

Our more vibrant neon shadow

The best way to showcase colored shadows, especially neon ones, is on a dark-themed webpage. Dark themes are very popular and this shadow 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
Neon Shadow Demo by Oscar-Jite (@oscar-jite)
on CodePen.

It’s best to use colors that contrast well, as we’ve done in this demo. The blue box-shadow stands out well against the dark background. To make it brighter, you can increase the opacity.

Creating neumorphic shadows

This effect is unique and visually pleasing. It came from skeuomorphism, which tries to replicate objects exactly as they would appear in real life.

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 of our object:

box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), 
           inset 10px 10px 15px rgba(70, 70, 70, 0.12);

An example of the neumorphic box-shadow we'll create

There are two box-shadows working opposite each other in the above example. The white box-shadow shows the direction of the light source and serves as a highlight. It’s similar to what we see in real life:

See the Pen
Neumorphic Shadows by Oscar-Jite (@oscar-jite)
on CodePen.

Neumorphic design mimics real-life objects. It doesn’t entirely replicate things, but it looks real enough that you could reach out and touch it. Now let’s create something cool: a push switch using a checkbox:

The push switch we'll create using a checkbox and CSS box-shadow

To get started, create a checkbox input:

<body>
    <input type="checkbox" />
</body>

Now, it’s time 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, add 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 box-shadow inside the circle, so that means creating two inset layers:

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;
}

Here’s the result:

See the Pen
Switch by Oscar-Jite (@oscar-jite)
on CodePen.

CSS `box-shadow` generators

CSS box-shadow generators are online tools that aid with the creation and virtualization of CSS box-shadow effects. They can be useful to both beginners and experienced developers as they can help save time and effort when designing shadow effects.

There are many CSS box-shadow generators out there but here are a few popular options.

CSS Box Shadow Generator

CSS Box Shadow Generator is an online CSS box-shadow generator that provides the ability to add more than one shadow, modify the shadow’s opacity, and define its spread radius. It also offers a real-time preview of the shadow effect so you can see the final result before copying the CSS code.

CSS Box Shadow Generator includes a variety of tools for generating CSS code for various elements such as box-shadows, borders, gradients, and text-shadows. It is easy to use even for people who are not familiar with CSS.

The generated CSS code is clean, efficient, and simple to understand, making it easy to integrate into projects. The tool is free and open source, allowing for contributions, and it is updated on a regular basis for continuous improvement.

Box Shadows

Box Shadows Generator

Box Shadows is a versatile tool that allows you to create complex and visually appealing box-shadow effects. It provides a wide range of features, including the ability to add multiple shadows, each with its own set of independent controls. Users can choose from a variety of shadow types, such as inset and outer, and fine-tune the offset, blur, spread, color, and opacity of the shadows.

Box Shadows ensures that the generated box shadows are compatible with a wide range of browsers and devices, providing a unified and visually appealing design across multiple platforms. It also has a live preview feature that lets developers preview and modify their shadow effects instantly.

Developers can easily create eye-catching box shadows that add depth and visual appeal to their web designs with Box Shadows’ user-friendly interface and extensive customization options. This tool makes it great for beginners and quick prototyping.

Neumorphism.io

Neumorphism.io Generator

Neumorphism.io is a CSS code generator that assists in the generation of neumorphic design elements. Neumorphism is a relatively new design trend in which soft, pill-like shapes with subtle shadows are used to create a 3D effect without using any 3D elements. This can produce a sleek, modern style that is user-friendly and aesthetically pleasing.

Neumorphism.io is an easy-to-use tool for quickly generating CSS code for neumorphic buttons, cards, and other elements. You can change the size, color, depth, and intensity of your elements to create a unique look and feel. It also provides a live preview of your design, so you can see how your changes will look before you copy the CSS code.

CSS Portal

CSSPortal’s CSS3 Box Shadow Generator is a straightforward and user-friendly tool that simplifies the creation of custom box shadows for web designs. It allows users to easily adjust parameters like shadow color, blur radius, spread distance, and box position without the need for manual coding, making it accessible to those with limited CSS knowledge.

Other online tools for designing shadows

Adobe XD or Figma (web design tools): While not particularly dedicated to box-shadow generation, design tools such as Adobe XD or Figma include extensive web design features such as shadow effects. Designers frequently choose these tools to generate and customize not only box shadows but also other design components in a unified environment
SmartShadow: This tool was created specifically for use with Sketch, a popular design software. It allows you to create box-shadow effects directly within Sketch and then it generates the corresponding CSS code for you
Box Shadows for TailwindCSS: This is a free tool that was developed for the Tailwind CSS framework. It offers pre-built shadow classes for effortless box-shadow addition in Tailwind CSS projects. Additionally, it provides ready-made vanilla CSS box-shadow code that can be seamlessly integrated into your project

When deciding which online CSS box-shadow generator to use, consider your specific needs, the complexity of the design you’re working on, your CSS familiarity, and the level of customization you require.

Browser support for the CSS `box-shadow` property

It’s important to note that the box-shadow is not fully supported on all browsers, especially earlier versions, so it’s necessary to use the webKit extension when styling shadows:

-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);

If a browser doesn’t support shadows, they are just omitted from the webpage with no effect on the layout.

`box-shadow` best practices

The box-shadow property is a nice way to make your website look good, but it could easily ruin your project if it’s not used properly. Here are some tips to consider when styling shadows:

Less is more: When 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 consistent: You can’t have your shadows looking haphazard! All your shadows should look similar because you should be using a single light source
Use animations sparingly: A quick way to reduce performance is by animating box-shadow. Plus, this property already looks great on its own, so there’s really no need for animation. Animations can be a simple :hover to transition
Use a shadow layering tool: If you don’t feel like writing multiple lines of code, there’s a great tool at shadows.brumm.af that can help you create layered shadows. It allows you to add as many as 10 box-shadow layers to your object, which saves time as you don’t have to enter multiple values to get the perfect shadow manually. Plus, you can get more intricate shadow values a bit more quickly:

Setting our box-shadow properties using the shadow tool

The preview of our shadow and the final code to produce it

Set the properties, preview box-shadow, and copy and paste the code into your project and you’re set!

Conclusion

In this article, we looked at how to layer shadows and create neon shadows using the box-shadow CSS property. We also introduced a few CSS box-shadow generators that can be useful to both beginners and experienced developers by saving you time and effort when designing shadow effects.

Finally, we looked at how we can combine the box-shadow property with the text-shadow property to create well-rounded shadow effects to add depth to our webpage.

You’re well on your way to becoming a shadow expert! Practice makes perfect, so try styling some shadows yourself. See how many box-shadow layers you can add to an element. Try combining colors and see what works. Remember to test on as many devices as possible for optimal performance.

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.

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. 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.