CSS drop-shadow() Function
Example
Add different drop shadow effects to an image:
#img1 {
filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
filter: drop-shadow(10px 10px 7px lightblue);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS drop-shadow() filter function
applies drop shadow effect to an image.
| Version: | CSS Filter Effects Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| drop-shadow() | 18 | 12 | 35 | 6 | 15 |
CSS Syntax
drop-shadow(h-shadow v-shadow blur spread color)
| Value | Description |
|---|---|
| h-shadow | Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image |
| v-shadow | Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image |
| blur | Optional. Adds a blur effect to the shadow, in pixels. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow's edge is sharp) |
| spread | Optional. Must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element) |
| color | Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black) |
More Examples
Example
Add different drop shadow effects to an image (with negative values for h- and v-shadow):
#img1 {
filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
filter: drop-shadow(-10px -10px 7px lightblue);
}
Try it Yourself »
Related Pages
CSS reference: CSS filter property.
CSS reference: CSS blur() function.
CSS reference: CSS brightness() function.
CSS reference: CSS contrast() function.
CSS reference: CSS grayscale() function.
CSS reference: CSS hue-rotate() function.
CSS reference: CSS invert() function.
