CSS gradient to create two different color design

Question

I am trying to create a specific shape with specific color to keep it as a background. I successfully created gradient color that I want but I am struggling with getting shape right.

Here is what I have done and what is am trying to achieve,

My Work :

enter image description here

Expectation :

enter image description here

Code :

.grad {
  height: 400px;
  width: 900px;
  background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}

<div class="grad"></div>

I am open to use any other method as long as it is only one 'div'. I don't want to use two different div which are causing many issues in responsive design. I tried using clip-path but that too did not help because of the nature of the design.

Any help would be appreciated.

Use pseudo-elements to achieve the offset effect you're after. — chriskirknielsen
– chriskirknielsen, Commented Mar 6, 2018 at 21:57
I tried using pseudo-elements but could not make the shape I want because I have never used them before. That's the nice suggestion. Let me try again. Thanks. — Developer123
– Developer123, Commented Mar 6, 2018 at 22:03

Temani Afif · Accepted Answer · 2018-03-07 20:18:53Z

2

Use multiple gradient then adjust dimension and position to obtain what you want:

.grad {
  height: 100px;
  width: 300px;
  background:
  linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0) 0 0/100% calc(100% - 10px) no-repeat,
  linear-gradient(110deg, #62e6a5 52%, transparent 0) 0 100%/100% 100% no-repeat;
}

<div class="grad"></div>

edited Mar 7, 2018 at 20:18

answered Mar 6, 2018 at 22:00

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

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

5 Comments

Developer123 Over a year ago

Looks perfectly fine.Thanks. The only problem I found was with responsiveness which is a huge concern for me.

Developer123 Over a year ago

wow that was so quick and easy solution.Thank you. I wish I would have thought of it. I want to learn linear-gradient more deeply, would you please provide some reference document which explains all the arguments for the gradient so I can learn it myself?

Temani Afif Over a year ago

@Developer123 you won't find 1 reference with everything but i would say that you have two main part ... the gradient that you can consider a simple backgroud-image THEN the other property i use after, background-size, background-position that allow you to have what you want so you need first to learn what is inside the gradient then learn how to adjust size/position to obtain what you want. I advise you to check this website css-tricks.com/search-results/?q=gradient where you will find many good thing .. you can also check some of my previous answers as i did a lot with gradient :)

Developer123 Over a year ago

Thank you for the reference. I will definitely check out the link you have provided and your previous answers.

Temani Afif Over a year ago

@Developer123 here is a link where you can easily find them stackoverflow.com/… .. you can also search within SO for gradient question/answer ;)

Mario Rawady · Accepted Answer · 2018-03-06 22:59:20Z

0

Use pseudo-elements like :before and :after

.grad{
  position: relative;
  height:200px;
  width:450px;
  margin-bottom: 10px;
  background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}

.grad-new{
  position: relative;
  height:200px;
  width:450px;
  margin-bottom: 10px;
  overflow: hidden;
  background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}

.grad-new:before{
  content: '';
  position: absolute;
  width: 3%;
  height: 10px;
  bottom: 0;
  right: 55.6%;
  background: #62e6a5;
  transform: skew(-20deg);
}
.grad-new:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: 0;
  left: 44.4%;
  background: #fff;
  transform: skew(-20deg);
}

<div class="grad"></div>
<div class="grad-new"></div>

answered Mar 6, 2018 at 22:59

Mario Rawady

8717 silver badges17 bronze badges

1 Comment

Developer123 Over a year ago

I tried to do with pseudo-elements before posting this question but I failed. However, it was so thoughtful of you to put the white line to cover right part. Excellent. Thank you. The only problem I found with the solution is responsiveness.

Collectives™ on Stack Overflow

CSS gradient to create two different color design

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related