Creating a responsive background color change

During the last project I had to work on, the designer presented me with a little challenge that I hadn't anticipated.

Changing the background color behind a div while keeping in mind that it should be responsive.

The Approach

I spent about half an hour trying to replicate this design by positioning the photo using the CSS property position: absolute. I quickly realized that it was more complicated than expected to make the image and content fit together for all possible screen sizes.

After a few minutes of thought, I realized that if I had to do such precise and time-consuming work, I must be on the wrong track. It's too much time for such a common problem.

The Great Idea

Linear Gradient

Why didn't I think of this earlier? I delved into the Tailwind CSS documentation and found "Linear gradients" and "Gradient Color Stops." I performed an initial test with a base color and achieved a gradual color change.

<div class="bg-gradient-to-r from-indigo-500 to-blue-500"></div>

Unfortunately, Tailwind CSS didn't allow me to go much further. I could add another color, but I couldn't ensure that the change happened at a specific point.

However, while browsing the web, I discovered that the linear-gradient property allowed me to control precisely when I wanted to make my color change. Bingo! I added a second color and used arbitrary values from Tailwind CSS to achieve it.

<div
  class="bg-[linear-gradient(to_bottom,_#FFFFFF_0%,#FFFFFF_85%,#000000_85%,#000000_100%)]"
></div>

1. bg-[] applies a background using arbitrary values. For more details, here's the Tailwind CSS documentation.

2. linear-gradient() speaks for itself.

3. to_bottom defines the direction of the gradient. Here, I want the color change to go from top to bottom.

4. #FFFFFF_0% is the starting color.

5. #FFFFFF_85% is the color at which the transition ends. Here, I want the color change to happen at 85% of the div's height.

6. #000000_85% is the new color at which the transition continues. As you can see, I use 85% again to ensure that the transition occurs at the same time as the first one.

7. #000000_100% is the color that goes all the way to the bottom of the div.

In Practice

More concretely, here's the code I used to achieve the final result:

<div className="bg-[linear-gradient(to_bottom,_#C5EDAC_0%,#C5EDAC_85%,#93B1A7_85%,#93B1A7_100%)] p-10">
  <div className="flex gap-10">
    <div className="flex-1">
      {/* Replace the following div with your image */}
      <div className="aspect-square w-full bg-[#99C2A2]" />
    </div>
    <div className="flex flex-1 flex-col items-start justify-center">
      <h2>Your title</h2>
      <p className="mt-10">
        Ipsum aliqua quis pariatur labore mollit ad. Sunt aliquip labore laborum
        voluptate aliquip exercitation anim pariatur labore magna pariatur. Esse
        minim dolore dolore proident enim tempor Lorem labore dolore excepteur
        sit sit cillum.
      </p>
      <div className="mt-12">
        <a href="/my-route">button</a>
      </div>
    </div>
  </div>
</div>
<div className="flex flex-col items-center bg-[#93B1A7] p-10 pt-0">
  <h3>Another title</h3>
  <p className="mt-10">
    Ipsum fugiat aute ipsum amet do nisi reprehenderit sunt et ut ipsum
    voluptate qui tempor. Ut ea ea laborum aute elit voluptate pariatur aute
    magna pariatur qui officia incididunt.
  </p>
  <div className="mt-12">
    <a href="/my-other-route">Another button</a>
  </div>
</div>

Resulting in the following output:

Can I Use

One of the first questions I asked myself before using this solution was, Is it compatible with all browsers? I immediately checked Caniuse to see if the CSS property linear-gradient was supported by browsers. It's a property I use infrequently, so I prefer to ensure that everyone sees what I see.

As of the time I'm writing these lines, the property is compatible with all browsers (or nearly all). Phew!