How to Dynamically Change Color While Scrolling With CSS

With stationary website elements like logos, you'll often run into a color mix-up when scrolling the page. This can happen if the static element goes over a section of the website that shares the same color with the element. The static element will be invisible while it rests on that background.

To fix this issue, you need to dynamically invert the color of the logo when it goes over an element with the same color. Learn how to achieve this effect using just CSS, with no JavaScript required!

Download the Starter Code

To follow this tutorial, download the starter code from its GitHub repository to your local machine.

Open index.html in a browser which should look like the page shown here:

The HTML page contains a logo and four sections. Each section has a dummy title and three paragraphs of dummy text. The logo’s text is the same black color as the background of the second and fourth sections. This effect comes from the nth-child(even) block in styles.css, which applies the black background to even sections.

Making the Logo Sticky

With this starter code, the logo doesn't stick to the top. This means that the logo disappears when you scroll down the page. You can turn your logo into a sticky header by applying the position: sticky property to it inside the CSS file. For a deep dive into positioning in CSS, read our post on the CSS position property.

Make sure that the logo sticks to the top, but only do so on larger screens (because, at smaller screen sizes, it could go over other elements). The following HTML responsive media query creates this effect:

        @media(width > 980px) {
  .logo { 
    position: sticky; 
    top: .5rem; 
  }
}

Now the logo will stick to the top at all times and follow you as you scroll. But you'll also notice that the text disappears when you scroll into the dark background sections (because the logo text is also black). Now take a look at how to fix this.

To ensure that the black logo doesn't disappear on black backgrounds, you're going to need to invert the color dynamically. The way you'd do this is by using the mix-blend-mode CSS property and assigning it a value of difference:

        @media(width > 980px) { 
  .logo { 
    position: sticky; 
    top: .5rem; 
    mix-blend-mode: difference 
  }
}

The mix-blend-mode CSS property specifies how an element's content should blend with the content of the element's parent and its background. The different value takes the difference value of each pixel, inverting the light colors. So if the color values are the same, they become black. Differences in the values will invert.

The above CSS addition will make the logo disappear completely. This is because you haven't set the color of the logo text to white outside the media query. Do that with the following code:

        .logo { 
  color: white; 
  /* Other CSS properties */
}

Now you've successfully set everything up. Scroll down the page and into the black background. You'd see the logo changing from black to white.

You can also work with other colors besides black and white. For example, if you were to change the color of your logo text to teal color (#008080), you'll get the color pink on white backgrounds. The following image illustrates this.

In most cases, you'd want your element to be white to get the best results. Also, if you scroll to the top, you might find your logo cut in half. This happens because the logo exists outside of the <section> element. To show the logo in full, you need to set the background color of the <body> element to white.

Using an Image as Logo Instead of Text

This technique doesn't just work with text, but also with images. Of course, you need to make sure you use a white image as the logo. The following example uses a white lorem ipsum logo that is in the same folder as the index.html file:

        <img src="loremipsum-297.svg" alt="Lorem Ipsum Logo">

The image used here is an SVG (Scalable Vector Graphic), a type of vector file.

Now the color of your logo image will be black on white background as shown in the image below.

But if you scroll into a black background, the color of the logo will automatically become white. You can see this in the image below.

You can also increase the logo's size by replacing font-size with height and width in the CSS block targeting the logo. After all, you're now dealing with an image rather than text.

        .logo {
  color: white;
  width: 10rem;
  /* Other CSS properties */
}

If you shrink the screen down, the media query will not apply anymore. This will turn off the different blend modes, making your logo disappear. To bring the logo back to the page, you need to set the mix-blend-mode property on the logo outside the media query:

        .logo {
  color: white;
  width: 10rem;
  mix-blend-mode: difference;
  /* Other CSS properties */
}

This will activate mix blending on the logo at all times, even on larger screens. But on small screens, the logo will remain at the top and not follow you as you scroll downward (because position:sticky works on big screens only). Finally, always remember to use a white logo to prevent it from disappearing from the page.

Learn More CSS Tips and Tricks

By using mix-blend mode, you can create fascinating layouts with alternating colors. Better yet, you don't have to hard code any color or set breakpoints because the mix-blend-mode will invert the color dynamically. It lets you create nice blends and colors for parts of an element's content depending on its direct background.

CSS is often regarded as one of the most exciting languages to learn. This is partly because CSS is full of tips and tricks like the one you just learned in this article. Some other handy CSS tips and tricks are hover effects, resizing images to fit into containers, truncating text with ellipses, and using text-transform.