Creating a linear gradient with an angle

Question

I have design specs that call for a gradient like this

I figured out how to do the slanted line and the color shift, but am having trouble accomplishing both in the same linear gradient property.

background: linear-gradient(90deg, #007bff, #0C4078); // color is right 
background: linear-gradient(178deg, white 50%, white 50%, #007bff 50%, #007bff 40%); // line angle is right

How can I make my linear gradient look like the spec?

Answer 1

You need to consider multiple background:

 .box { height:200px; background: linear-gradient(to bottom right,#fff 49%,transparent 50%) top/100% 30%, linear-gradient(to right, #007bff, #0C4078); background-repeat:no-repeat; }

 <div class="box"></div>

In case you want transparency you can use clip-path with one background:

 .box { height:200px; background:linear-gradient(to right, #007bff, #0C4078); -webkit-clip-path:polygon(0 30%,0 100%, 100% 100%,100% 0); clip-path:polygon(0 30%,0 100%, 100% 100%,100% 0); }

 <div class="box"></div>

Or mask

 .box { height:200px; background: linear-gradient(to right, #007bff, #0C4078); -webkit-mask: linear-gradient(to bottom right,transparent 49%,white 50%) top/100% 30% no-repeat, linear-gradient(white,white) bottom/100% 70% no-repeat; mask: linear-gradient(to bottom right,transparent 49%,white 50%) top/100% 30% no-repeat, linear-gradient(white,white) bottom/100% 70% no-repeat; }

 <div class="box"></div>

---

Here is another way if you want transparency and better support than clip-path / mask :

 .box { height: 200px; position: relative; overflow: hidden; z-index: 0; } .box:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; transform: skewY(-5deg); transform-origin: right; background: linear-gradient(to right, #007bff, #0C4078); }

 <div class="box"></div>