How to give more than 3 color in a gradient property such that 2 mixed well in 50% and 1 will show in 50%?

Question

I want to give a gradient color to the half side of the background in the 90 degree and white color to another half side. Here is my code
body{    
     background: linear-gradient(90 deg, blue 50%, white 50%);
}

But here I want to give the gradient color of purple to pink instead of blue. Can I do that? If so then how?
this is what I have
this is what I want
Thank You In advance for your help

Pritesh · Answer

You can achieve this as below:
    body {    
      background-image: linear-gradient(90deg,purple,pink 50%,white 50%);
   }

Kiyubi · Answer

You can devide the main div into 2 child divs and then by applying display:flex to the main div or by floating the 2 children(one to left and to right) you can align 2 divs side by side and then you can give them background color invidually.

Answered by Kiyubi on December 11, 2021

How to give more than 3 color in a gradient property such that 2 mixed well in 50% and 1 will show in 50%?

2 Answers

Add your own answers!

Ask a Question