CSS Filters For Nice Effects

Using css filters can add some nice image effects without using Sketch or Photoshop. You can use several filter types and can even combine them for different effects:

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

Here is the original image:

sepia

Let’s apply this filter:

.sepia {
    filter: sepia(90%);
}

sepia

Let’s get a bit more creative:

.blur-sat-cont {
    filter: contrast(170%) saturate(80%) blur(1px);
}

sepia

Finally, let’s check out the hue-rotate:

.hue-rotate {
    filter: hue-rotate(-40deg);
}

sepia