CODEWITHSUNDEEP
htmlcsscss-shapes
Henrik Petterson
Henrik Petterson

Reputation: 7094

Diagonal background effect with gradient (gradient within gradient)

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:

enter image description here

So basically, a gradient within a gradient.

Upvotes: 0

Views: 4452

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105863

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 ?*/
}

Upvotes: 1

Akshay
Akshay

Reputation: 14348

-- Update --

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 :

enter image description here

Upvotes: 2

Rahul Das
Rahul Das

Reputation: 172

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.

Upvotes: 3

Levi Cole
Levi Cole

Reputation: 3684

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.

Upvotes: 2

Related Questions