- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
To add drop shadow 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
Example
<!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>
Output
- Related Articles
- Adding CSS3 Border Images
- Applying Opacity to Images using CSS3
- Applying Sepia Effect to Images using CSS3
- Adjusting the Saturation of Images using CSS3
- Drop Shadow with HTML5 Canvas
- Adding Multiple Backgrounds with CSS3
- Set Drop Shadow Effect with CSS
- How to create CSS3 Box and Text Shadow Effects?
- How to add a drop shadow effect to a text node in JavaFX?
- Convert Images to PDFs using Tkinter
- Converting an Image to Grayscale using CSS3
- How to Drop MySQL Table using Java?
- Adding Borders to Tables using CSS
- Adding options to a using jQuery?
- Adding textures to graphs using Matplotlib

Advertisements