Converts the input image to grayscale.

grayscale( <number> | <percentage> );


Converts the input image to sepia.

sepia( <number> | <percentage> );


Makes the image less or more bright.

brightness( <number> | <percentage> );


Adjusts the contrast of the input.

contrast( <number> | <percentage> );


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> );


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.