CSS: Add shadow
Ruxin Qu
Posted on July 14, 2022
1.Applies a drop shadow effect to the image.
img{
filter: drop-shadow(offset-x offset-y blur color);
}
example:
filter: drop-shadow(1px 1px 1px black);
2.Add shadow to the text.
h1{
text-shadow: offset-x offset-y blur color;
}
An example from www.w3schools.com:
text-shadow: 5px 5px 10px red;
3.Add one or more rectangle shape shadow to an element
box-shadow: offset-x offset-y blur color,
offset-x offset-y blur color,
offset-x offset-y blur color;
}
An example from www.w3schools.com:
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
*Difference between box-shadow and drop-shadow
💖 💪 🙅 🚩
Ruxin Qu
Posted on July 14, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.