CSS Filter Function Demo

1. Drop Shadow

Adds shadow

filter: drop-shadow(2px 4px 8px #585858);

2. Blur

Softens the image

filter: blur(4px);

3. Brightness

Adjusts lightness

filter: brightness(150%);

4. Contrast

Boosts contrast

filter: contrast(200%);

5. Grayscale

Converts to grayscale

filter: grayscale(100%);

6. Sepia

Warm, vintage tone

filter: sepia(80%);

7. Invert

Inverts colors

filter: invert(100%);

8. Saturate

Boosts color intensity

filter: saturate(200%);

9. Hue Rotate

Shifts colors around the wheel

filter: hue-rotate(120deg);

10. Opacity

Semi-transparent

filter: opacity(50%);

Bonus tip:

You can combine multiple filters for unique effects. For example:

filter: grayscale(50%) contrast(120%) blur(2px);