- 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
Set Drop Shadow Effect with CSS
Drop Shadow is used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color.
The following parameters can be used in this filter:
Parameter | Description |
---|---|
color | The color, in #RRGGBB format, of the dropshadow. |
offX | Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left. |
offY | Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up. |
positive | If true, all opaque pixels of the object has a drop shadow. If false, all transparent pixels have a drop shadow. The default is true. |
Example
You can try to run the following code to set drop shadow effect:
<html> <head></head> <body> <img src = "/css/images/logo.png" alt = "CSS Logo" style = "Filter: Chroma(Color = #000000) DropShadow(Color = #FF0000, OffX = 2, OffY = 2, Positive = 1)"> <p>Text Example:</p> <div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div> </body> </html>
- Related Articles
- CSS Shadow Effect
- Add a blur effect to the shadow with CSS
- Set Mask Effect with CSS
- Set Invert Effect with CSS
- Set Grayscale Effect with CSS
- Drop Shadow with HTML5 Canvas
- How to set the shadow effect of a text with JavaScript?
- Set the text shadow around a text with CSS
- How to add a drop shadow effect to a text node in JavaFX?
- Set the speed of the hover effect with CSS
- Shadow Filter with CSS
- Set the shadow around the text in CSS
- Wave effect with CSS?
- Flip Effect with CSS
- Create an attenuated shadow with CSS

Advertisements