See the Pen Diagonal Responsive Two-Color Backgrounds CSS by Josh Winn (@forthewinn) on CodePen.

Say you want to create a button whose background in the top left is one color, and a different color in the bottom right. The color is basically split with a diagonal line from the bottom left corner to the top right corner. It seems simple, yet a lot of the CSS techniques I came across out in the web, for making this responsive (regardless of the size of the button) were very dated, or needed JavaScript.

It’s very simple using the linear-gradient property and “magic corners”.

Gradients as Solid Colors

We’re used to thinking of linear-gradients as well..gradients. Colors that fade from one to another. But they can also be used for solid colors. If your “color-stop” positions both start and end at the same point, there’s no color blending in the middle, so you get two solid colors on both sides.

To the Corner

CSS gradients also have an angle option. So you could say linear-gradient(45deg, blue, orange) and that will split your gradient at a nice 45 degree angle. But if your element is not a fixed width and height, this won’t go from corner to corner. Thanks to the MDN reference page, I saw that you can also specify to <side-or-corner>, where <side-or-corner> is left/right top/bottom. So for our button example, as seen in the CodePen, is:

background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);

That’s it. As for old browser support, this does not work in IE9—which is why I give a regular solid background color before the gradient, so there is a fallback.

Reference and More Info

Comments on this Article

  1. Mark says:

    Great Joshua, thank You very much. But is there a way how to smooth the diagonal line? Right now you can see it’s a little bit choppy- it’s ok on those buttons but I tried these technique on my navigation bar and it looks terrible unfortunately.

    • Josh says:

      Unfortunately Chrome renders it a bit jagged. The angles look a lot smoother in Firefox (especially on the bigger button). The jaggedness is more noticeable when the colors have a lot of contrast. Chrome will render it smoothly only at 45 degrees right now. I’m not aware of any CSS that can fix that; this is something on the browser side that will hopefully change eventually. I see a few open chromium issues related to it.

      • Richard says:

        You can blend the line a bit in Chrome with background: linear-gradient(to right bottom, #2f3441 49%, #212531 50%);.

        Note the 49% versus 50% for the first color. This creates a nearly unnoticeable gradient that smoothes the jagged line.

  2. Volker says:

    Hi,
    it is possible to use images instead of colors?

    Thx
    Volker

  3. zJoriz says:

    Sweet tip, thanks! I also smoothed the gradient somewhat (49%/49%), seems to help to keep it ‘anti-aliased’.

  4. MARK NDOWOBE OKABA says:

    Thanks so much Josh. I was about to smoothen the edge by 49.9 and 50, largely depending on the colors of course

Leave a Reply

You can use the <pre> tag to post a block of code, or <code> to highlight code within text.