I want to diagonally split the background into two colors where one is white color. And I want the other one to be a gradient that goes from red to blue.
Here we have red split with white background (source):
body {
height:100vh;
width:100vw;
background:linear-gradient(160deg, red, red 60%, white 60%, white);
}Is it possible to make the red part a gradient, where it goes from red to blue, something like:
So basically, a gradient within a gradient.
Yes you can.Use the given css:
height:100vh;
width:100vw;
background:linear-gradient(90deg, red , purple 60%, blue 100%);
clip-path: polygon(0% 0%,100% 0%,100% 30%,0% 100%);
At first fill it with the gradient and then clip it.
clip-path unfortunately, but I like this one a lot.
I have managed to do this with a pseudo element on the body.
See it in action here: https://jsfiddle.net/q8az3u0g/
body:before {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 100vh 100vw;
border-color: transparent transparent #fff transparent;
}
Basically the body has a horizontal gradient and then the pseudo element becomes a white triangle overlay.
You can do this with a single element by adjusting the linear-gradient.
.shape {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.shape:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: red;
background: linear-gradient(110deg, red, violet, blue);
transform-origin: 0 100%;
transform: rotate(-20deg) scale(1.2,1.2);
bottom: 0;
left: 0;
}<div class="shape"></div>Previous Answer
First a slanted shape is created by rotating a div and then rotating its child element in opposite direction. (overflow:hidden will cut off the remaining parts) On the child element gradient is applied.
.shape {
width: 500px;
height: 300px;
overflow: hidden;
}
.rotated {
width: 100%;
height: 100%;
transform-origin: 0 100%;
transform: scale(1.5, 1.5) rotate(-20deg);
position: relative;
overflow: hidden;
}
.coloured {
position: absolute;
width: 100%;
height: 100%;
background: red;
background: linear-gradient(to right, red, violet, blue);
transform-origin: 0 0;
transform: rotate(20deg);
bottom: 0;
left: 0;
}<div class="shape">
<div class="rotated">
<div class="coloured"></div>
</div>
</div>You can do it with two elements if required ( One if you can use clip-path,it has low browser support)
.shape {
width: 500px;
height: 300px;
overflow: hidden;
}
.child {
width: 100%;
height: 100%;
transform-origin: 0 100%;
transform: scale(1.5, 1.5) rotate(-20deg);
position: relative;
overflow: hidden;
}
.child:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: red;
background: linear-gradient(to right, red, violet, blue);
transform-origin: 0 0;
transform: rotate(20deg);
bottom: 0;
left: 0;
}<div class="shape">
<div class="child"></div>
</div>This is how it works :
You can also lay 2 gradients on top of each others (keywords i react on :gradient within gradient)
body {
margin:0;
min-height: 100vh;
background:
linear-gradient(to bottom right, transparent 50%, white 50.25%), /* update direction and start/stop value to your needs */
linear-gradient(90deg, red, blue) white;
background-size:100% auto;
transition:0.5s
}
/* extra test*/
body:hover {
background-size: 125% auto;/* add some extra tunning to deg direction and size ?*/
}