Using Filters To Spice Up Your Front-End Game — Anyday
Idea by Sam Kim

Take a look at our home page, about us page, and contact us page.

Pretty cool eh?

Well did you know those banners with the gradient backgrounds are using the same single video file?

It saved our designers countless hours of having to replicate the video to various versions – and gave us the freedom to control the look and feel within code – all thanks to CSS Filters!

In this mini-tutorial, I’m going to cover how we went about creating the banners above with various color tones from a single video file using CSS filters.

I’ve also created a little mini tool at the end that allows you to see the various CSS filters in action!

First, let’s create our video banner. As you can see from our banner, we made it fully responsive by ensuring that the middle of the video always stays centered on the screen – not stretching the video.

We can accomplish this by creating a simple video container and adding the video of our choice that’ll be used as the background.


<section class="video-hero" poster="https://any-day.com/wp-content/uploads/2021/06/home-poster.png">
  <video muted="" autoplay="" playsinline="" loop="" src="https://anyday2-17cf1.kxcdn.com/gradient2.mp4" data-src="https://anyday2-17cf1.kxcdn.com/gradient2.mp4"></video>
</section>

.video-hero {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.video-hero video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

The above code will create the following banner.

Let’s have some fun now and see how we were able to accomplish the variations on the different pages.

Using CSS filters, we can apply various changes to apply various graphical effects to an element such as blur, brightness, contrast…etc

To play around with the colors, we can apply the hue-rotate property, which basically applies a hue rotation on the specific property (our video in this example).

We gave our video the following changes: filter: hue-rotate(301deg). Let’s see how it looks!

Pretty cool eh?

We’ve created a mini tool that showcases the various CSS filter properties. Check it out!

Go Up