Add 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

Open Compiler
<!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 −

Open Compiler
<!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 −

Open Compiler
<!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>
Updated on: 2023-10-27T14:09:19+05:30

9K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements