A simple website is not enough to convert your online visitors to your customer...

The CSS box-shadow property is used to create a drop shadow effect. Here are the ins and out of applying box-shadow property to make an appealing website.

Upscale Your Website with the Box-Shadow Property

How to Apply the CSS Box-Shadow Property to Elements?

The box-shadow property in the CSS allows you to cast one or more shadow effects on an element. It adds a shadow around the element's frame. You can also add multiple effects to an element by separating them with commas. We do this to add size and depth to an object, thus bringing realism to your website.

Now that you are aware of what exactly we are going to apply to an element, let’s move on to the parameters that will be required for this task.

What is box-shadow property?

We define a box shadow CSS by X and Y offsets, blur radius, and spread regarding the element.

X offset: It represents the horizontal shadow position of the element.

Y offset: It represents the vertical shadow position of the element.

Blur radius: It represents the sharpness of the shadow of the element. The higher the value of a blur radius, the lighter the shadow will be and vice versa.

Spread: It is the area in which the shadow appears.

Note: All values except the blur radius can be negative.

With this, you must have understood the parameters that are used to build a shadow for an element. The next process will be easygoing for you.

Important parameters for generating shadow on an element

To add a horizontal and vertical shadow here’s the simplest way to do it.

Here’s how a typical box shadow is declared in CSS.

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


In the above example, the first value is the X offset, the second is the Y offset, the third is the blur radius, and the fourth is the spread.

Note: Take a look at which browsers support the box-shadow property for a smooth workflow.

Applying box-shadow to an element

Box shadow property in the CSS offers all the creative options to help your ideas come to life. Check the below pointers to know more.

1. Change the default color of the shadow

The default color of the shadow can be the present text color. However, if you wish to change it, specify the same in the “color” parameter that defines the color of the shadow.

div {
  box-shadow: 11px 11px lightblue;
}


If you want to add a blur effect to the shadow, proceed with the following code.

div {
  box-shadow: 11px 11px 6px lightblue;
}


The spread radius with a positive value enlarges the shadow, while a negative value decreases the shadow size.

If you want to set the spread radius of the shadow for an element, proceed with the following steps.

div {
  box-shadow: 11px 11px 6px 13px lightblue;
}


The inset parameter is responsible for the smooth transition between the outer shadow to an inner shadow. It looks like this.

Here’s how you can achieve it for your element.

div {
  box-shadow: 10px 10px 5px lightblue inset;
}


To elevate the appearance of any element, we add multiple shadows to it so that it can instantly grab attention. To do so in the CSS, apply the code in a below-given manner with your choice of colors.

div {
  box-shadow: 6px 6px blue, 13px 13px red, 17px 17px green;
}


To give you an insight into how multiple shadows look, here’s an example that will clear it all.

Note: If the border radius is specified on the element along with a box shadow, the box shadow CSS takes the same rounded corners.

In order to get shadow only on three sides of the box, we will be including three shadows: an inset shadow, a regular drop shadow, and a 2px shadow to create a border effect.

blockquote {
  padding: 21px;
  box-shadow:
       inset 0 -3em 3em rgba(0,0,0,0.2),
             0 0  0 2px rgb(245,245,245),
             0.3em 0.3em 1em rgba(0,0,0,0.4);
}


The output for the same will look like this.

In the real world, shadows are usually grey or black. But you can also add colors in the shadow on your website. You just have to change the color value on the box shadow to get the neon effect.

Let’s understand it in brief with an example.

.box{
  box-shadow: 0px 6px 11px 0px rgba(0, 0, 0, 0.8); 
}
.box2{
  box-shadow: inset 0px 6px 11px 0px rgba(0, 0, 0, 0.8);
}


The output for the above code will bring the following change in the box shadow.

What more can you do with the box-shadow property?

An overdose of anything can ruin your website design. The same goes for the box-shadow usage. Even though it’s a great way to make your website look aesthetically pleasing, if not used properly, can ruin your project entirely. In order to avoid such failures, here are some expert-recommended tips for you.

Ensure that all the elements that have box shadow CSS look similar. If you are using different ‌shadow for various elements on your website, it will look haphazard.

Adding many layers of shadows can lead to delay in page load. Even though the updated devices  may not encounter this issue, users with older devices won’t be able to access your website, thus increasing the bounce rate.

The idea of using animations on the box shadow can affect the performance of your website. We recommend ‌that you use the animations sparingly, as the property of box-shadow already looks great with all its features and properties.

Additional tips for creating effective box-shadow

You may not always have the time to write multiple lines of code to create and apply box-shadow property in CSS. In such a scenario, you can leverage a great tool, shadows.brumm.af that quickly helps you create layered shadows.

You can add as many as 10 layers of box shadow to your object. You don’t have to worry about manually entering multiple values to get the perfect shadow with it. Start by simply setting the properties and preview in the box shadow. Next, copy and paste the code into your CSS project and you are good to go.

Once you are done with the above window, you will get a code that can be used in your project.

We have covered box-shadow property from scratch to how you can bring realism to your website. Try your hand at styling some shadows yourself. Go creative by combining the colors, adding layered shadows, neon colors to shadows, and more, to see what works best for your project.

Do remember to test it all on as many devices as possible to ensure optimal website performance. With all this, you will be a shadow expert that knows ample ways to add creativity with a minimal piece of design.

Alternative for a quick box-shadow

A simple website is not enough to convert your online visitors to your customer. Websites are meant to take the website visitors on an aesthetically pleasing journey. To curate such a masterpiece, designers usually play with the hues, shades, fonts, and much more. However, shadows of website elements play a significant role in bringing the website to life. In this article, we will discuss about CSS box-shadow property and how to implement them to CSS elements.

But first, let’s get you acquainted with the basics.

The X offset or horizontal offset sets the shadow in the horizontal direction of an element. So, to attain a shadow only at the bottom of the box, set the horizontal offset to zero and input some value to the vertical offset.

When you have too many numbers input in the value of your box-shadow property, that’s when the shadow doesn't work because you did not have a set width on the shadow div.

The text-shadow adds a shadow to the text while the box-shadow adds a shadow to the elements.

The recent versions of Chrome, Internet Explorer 9, and Firefox support the box-shadow property of CSS.

You can put a box shadow on an image in CSS by setting the vertical and horizontal properties that indicate the position of the shadow.

Yes, we can apply transform property to box shadow in CSS to create an illusion of any object moving closer and away from the viewer.

Frequently Asked Questions

What’s up with Turing?
Get the latest news about us here.

Press

Know more about remote work.
Checkout our blog here.

Blog

Have any questions?
We’d love to hear from you.

FOR DEVELOPERS

How to Apply the CSS Box-Shadow Property to Elements?

Author

Srishti Chaudhary

What Goes Behind Writing a Flawless CSS Code?

Building Custom Animations With SVGs in CSS

How Can You Improve Your Predictive Analytics With ML?

How to Create Powerful Themes Using SCSS?

How to Use Python for Learning Vector Quantization From Scratch

Frequently Asked Questions

Press

Blog

Contact

Hire remote developers