CSS gradient within gradient

Question

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.

To achieve what you are trying here, and to make it compatible with all current browsers, you will have to use the CSS pseudo-elements (google to find a tutorial on how to use them) - one positioned at the top of the parent container, one at the bottom, and both having a width of 100% of parent container. Top gradient should be added to ":before" element, middle background color to the container itself (as it is now), and the bottom gradient to ":after" element. — Artanis
– Artanis, Commented Sep 6, 2020 at 13:57

Temani Afif · Accepted Answer · 2020-09-06 13:20:15Z

1

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>

answered Sep 6, 2020 at 13:20

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Senatrius · Accepted Answer · 2020-09-06 14:03:13Z

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.

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>

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.

Collectives™ on Stack Overflow

CSS gradient within gradient

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related