Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding Drop Shadow to Images using CSS3
The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax −
Syntax
filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
As you can see above, with the filter property, we can set the following effects: drop shadow, blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, url.
The drop shadow on an image can look like the following image −
To add the drop shadow effect to image in CSS3, use the drop-shadow value for filter property. It has the following values −
h-shadow − To specify a pixel value for the horizontal shadow.
v-shadow − To specify a pixel value for the vertical shadow. Negative values place the shadow above the image.
blur − To add a blur effect to the shadow.
spread − Positive values causes the shadow to expand and negative to shrink.
color − To add color to the shadow
Apply Drop Shadow Effect to an Image
Example
Let us see an example to apply the drop shadow effect to an image with drop-shadow −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
Apply Horizontal and Vertical Drop Shadow Effects
Example
The following is an example to set horizontal and vertical drop shadow effects to images. The drop-shadow with the values h-shadow and v-shadow allows you to achieve the same −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(5px 5px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
Apply a Blur Effect to the Drop Shadow
Example
The blue effect is the third value under the drop-shadow. Set it as pixels for a blur effect −
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(5px 0 20px orange);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
8K+ Views
