Grayscale
Converts the input image to grayscale.
grayscale( <number> | <percentage> );
Sepia
Converts the input image to sepia.
sepia( <number> | <percentage> );
Brightness
Makes the image less or more bright.
brightness( <number> | <percentage> );
Contrast
Adjusts the contrast of the input.
contrast( <number> | <percentage> );
Blur
Applies a Gaussian blur to the input image.
blur( <radius> );
Drop Shadow
Applies a blurred offset version of the image's alpha mask, drawn with a specified color, below the image.
drop-shadow( <right-offset> <bottom-offset> <blur> <color> );
With Border
Adding a border to the image, causes the border and the image to both have drop-shadows.
This is not the effect I was looking for.
Inherited from Div
Take the previous example and nest the image inside of a div, then move the drop-shadow from the image to the div.
Unfortunately, the drop-shadow is inherited by the image and the shadow is applied to both the div and the image.
Attempting to override the filter on the image is ignored.
This is still not the effect I was looking for.
Box Shadow
Abandon the drop-shadow filter altogether and use box-shadow instead.
This is exactly the effect I was looking for.
Hue Rotate
Applies a hue rotation on the input image. The parameter defines the number of degrees around the color circle the input samples will be adjusted.
hue-rotate( <angle> );
Opacity
Adjusts the transparency of the input.
opacity( <number> | <percentage> );
At 20% opacity, the image overlay barely obscures the text.
At 80% opacity, the image overlay mostly obscures the text.