CODEWITHSUNDEEP
htmlcsslinear-gradients
xyminim
xyminim

Reputation: 1

CSS gradient within gradient

I wanted to know if it is possible to achieve a gradient like that in this photo by using three elements. There are three sections right now that I'm trying to work with:

Top: background: linear-gradient(172deg,#FFFFFF 50%, #2D1E2F 50%);

Middle: background-color: #2D1E2F;

Bottom: background: linear-gradient(172deg,#2D1E2F 50%, #FFFFFF 50% );

I've tried some things like background: linear-gradient(172deg,#FFFFFF 50%, #2D1E2F 50%, #2D1E2F 5%, #674568 ); but the colors don't match up correctly. Thanks.

Upvotes: 0

Views: 419

Answers (2)

Senatrius
Senatrius

Reputation: 145

I don't know if this is possible to do the way you want it. I've looked at the image using a color picker, the gradient is going from top to bottom, but if you're using a gradient to create the angle, you can't just change gradient direction halfway. I'd suggest just using the solution Temani Afif posted, but if you really, 100% need it to be 3 pieces and not one, there are a couple workarounds.

  1. Have top and bottom triangle pieces be solid color. It won't match exactly and won't look as good, but just adding gradient on the middle piece, it will look somewhat close enough.

body {
  background: black;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  width: 365px;
  height: 100vh;
  background: #FFFFFF;
  margin: 0 auto;
}

.top {
  height: 20%;
  width: 100%;
  background: linear-gradient(to bottom right, #FFFFFF 50%, #674568 50%);
}

.mid {
  flex: 1;
  width: 100%;
  background: linear-gradient(#674568, #2d1e2f);
}

.bot {
  height: 20%;
  width: 100%;
  background: linear-gradient(to bottom right,#2d1e2f 50%, #FFFFFF 50% );
}
<div class="container">
  <div class="top"></div>
  <div class="mid"></div>
  <div class="bot"></div>
</div>

  1. Apply the solution Temani Afif posted, but on separate parts

body {
  background: black;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 365px;
  height: 100vh;
  background: #FFFFFF;
  margin: 0 auto;
}

.top {
  height: 20%;
  width: 100%;
  background: linear-gradient(#674568, #5f4060);
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.bot {
  height: 20%;
  width: 100%;
  background: linear-gradient(#352337, #2d1e2f);
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.mid {
  flex: 1;
  width: 100%;
  background: linear-gradient(#5f4060, #352337);
}
<div class="container">
  <div class="top"></div>
  <div class="mid"></div>
  <div class="bot"></div>
</div>

Sounds like a lot of unnecessary work so just stick with a single div, for your own sanity's sake.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272901

You can consider clip-path to help you with the white part and then use any kind of gradient:

.box {
  width:350px;
  height:500px;
  background:linear-gradient(45deg,red,blue);
  clip-path:polygon(0 20%,100% 0%,100% 80%,0% 100%)
}
<div class="box">

</div>

Upvotes: 1

Related Questions