No Time Dad

A blog about web development written by a busy dad

Split Color Div with Tailwind

Lately, I’ve noticed a few sites that have backgrounds made up of two or more colors. I’ve always been curious about how that’s done. My first guess was that it’s two divs, each with their own background color, stacked on top of each other. But, then I noticed some sites that have multi-color backgrounds with elements on top. This gets my wheels turning because I know if the background is made up of two divs, stacking a third div on top is going to be messy.

It turns out that having a split color div isn’t that complicated. And it often only involves a single parent div. Below is a screenshot from TailwindUI where a multi-colored background is used with cards on top.

split-color-example

Since the example above is from Tailwind I thought it would be fun to try and recreate it using their library. I can’t see the source code for the example above, so I’ll need to figure this one out on my own, or at least do some clever googling.

Getting started

I think it’s a good idea to learn new css techniques in vanilla css before trying to apply it through a library. Doing it the other way around will almost certainly lead to frustration.

It turns out that all I need to do is use the background property with the linear-gradient css function to achieve the split background. I want the top to be black and the bottom to be white.

Using linear-gradient I can set the position of the gradient’s starting point, as well as the color stop. For this example I’ll just do a 60/40 split. The to bottom keyword is the starting point.

<div class="VanillaContainer"></div>
.VanillaContainer {
  height: 500px;
  background: linear-gradient(to bottom, black 60% , white 40%);
}

Using Tailwind

So, that was pretty painless in vanilla css. Unfortunately, in my experience, it’s not quite as painless to implement in Tailwind.

There is great support for linear-gradients in Tailwind, but most of the examples are with a transition from one color to another color. I really just needed a hard stop between colors without the “blending” effect.

Below is the closest I managed to get the div to a split color background using Tailwind’s bg-gradient utility classes straight out of the box.

<div class="bg-gradient-to-b from-black via-black to-white h-96"></div>

It’s not terrible, but it’s also not what I’m looking for. I really want that nice clean line dividing both sections. I searched the Tailwind documentation, but I couldn’t find a way to implement the hard stops with percentages without creating a custom config value.

Off to tailwind.config.js I went. The changes to the config aren’t complicated. I just need to add a custom value for the backgroundImage property that I can reference in my markup via bg-{name-of-custom-property}

// tailwind.config.js
module.exports = {
  ...
  theme: {
    extend: {
      ...
      // Note: I changed the color to Tailwind's bg-gray-900 hex equivalent
      backgroundImage: {
        'split-white-black': "linear-gradient(to bottom, #111827 60% , white 40%);"
      }
      ...
    },
  },
  ...
}
<div class="bg-split-white-black h-96"></div>

Conclusion

Coming into this having no clue how to make a multi colored background, it was definitely easier than I thought it was going to be. I was dreading the thought of multiple divs and stacking contexts. And yeah, I did have to create a custom config value for it to work how I wanted with Tailwind, but it was basically a one line change.

Now I can make a fancy pricing card similar to the TailwindUI version pictured above. The code for this fancier example is below.

Starter
$99
/month
  • Unlimited accounts
  • 200gb storage
  • Custom domain
<div class="bg-split-white-black flex justify-center items-center py-10">
  <div class="shadow-lg bg-white rounded-md">
    <div class="flex flex-col items-center justify-center border-b-2 border-gray-100 px-16 py-8">
      <div class="text-2xl font-bold">Starter</div>
      <div class="flex items-center">
        <div class="text-5xl font-bold">$99</div>
        <span class="opacity-70 ml-2 mt-2">/month</span>
      </div>
    </div>
    <div class="px-8 py-4">
      <ul>
        <li class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
          <div class="ml-2 opacity-80">Unlimited accounts</div>
        </li>
        <li class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
          <div class="ml-2 opacity-80">200gb storage</div>
        </li>
        <li class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
          <div class="ml-2 opacity-80">Custom domain</div>
        </li>
      </ul>
    </div>
    <div class="px-8 pb-4 flex flex-col">
      <button class="bg-blue-700 text-white font-semibold py-5 px-6 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50">
        Get Started
      </button>
    </div>
  </div>
</div>