How to create smooth shadows in CSS

naveen-golla , Credit to  volkotech-solutions Nov 02

In this blog, we are going to learn about the most effective and smooth shadows in CSS.

What is a shadow?

Shadow forms like when light falls on the object. The shadow we see formed around the object is not the same as every time it’s complex. It changes the shadow shape based on the light that falls on the object. For that, we create shadows in CSS by using the property called box-shadow.

We can’t create real shadows why?

If you are trying to create a real shadow using box-shadow property, you can’t.

First, you have to understand how box-shadow property works. Box-shadow property simply produces the blurred effect of an object. Using this we change the length, color, spread, and offset nothing more.

But there is a way to control this property it will use only in layered shadow. We create multiple shadows in a simple box-shadow by using commas it increases the range of shadow.

Normal box-shadow

	box-shadow: 0 0 10px gray;

Horizontal box-shadow

   	box-shadow: 10px 0 1px gray;

Vertical box-shadow

	box-shadow: 0 10px 1px gray;

Layered box-shadow

	box-shadow: 3px 3px 5px rgb(206, 45, 45), 6px 6px 5px rgb(16, 206, 16), 9px 9px 5px rgb(37, 37, 182);

n this layered shadow, there are different types of shadows. There we can create more different ways in it.


We can create as many shadows by playing the opacity and spread of y-offset and x-offset.


That’s all for now. I hope you learned something new in this lecture. Thank you for reading! Do share and comment below.



Read Next