Search code examples
htmlcssbackground-colorlinear-gradients

CSS color transition in triangles with linear gradient

I am working on a rectangular background which is divided into 2 triangles by a line from top left to bottom right, as shown in the pic.

What I want to achieve is color transition in each triangle:

  1. In triangle ABD: pink becomes darker from left to right
  2. In triangle ACD: blue becomes darker from left to right

Note: The width and height are not fixed to 600 and 250. I just use them for demo purpose.

HTML code:

<div class="background-wrapper">
  <p class="float-left">A</p>
  <p class="float-right">B</p>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <p class="float-left">C</p>
  <p class="float-right">D</p>
</div>

CSS code:

.background-wrapper {
  position: relative;
  width: 600px;
  height: 250px;
  color: #FFFFFF;
  padding: 20px 50px 80px 50px;
  background: linear-gradient(to left bottom, pink 50%, blue 50%);
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

Demo jsfiddle here

enter image description here

Solution

  • One posibility, that is cross-browser but that gives washed colors, is to overlay the triangles with a semitransparent gradient that is white on one side and black in the other.

    This effect gets much better using blend modes, but the support is lower.

    .test {
    width: 400px;
  height: 300px;
  background-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,0) 40%,
    rgba(255,255,255,0) 60%, rgba(255,255,255,.5)), 
    linear-gradient(to top right, blue 50%, fuchsia 50%);

}
    <div class="test"></div>