How create two different colour background? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

How create two different colour background?

16th Oct 2021, 2:21 PM
Devansh Mishra
Devansh Mishra - avatar
7 Answers
+ 4
Use a css gradient: https://css-tricks.com/css3-gradients/ background: linear-gradient(blue, yellow); Or if you want don't want the gradual fade you have to set the position: background: linear-gradient(to right, blue 0%, blue 50%, yellow 50%, yellow 100%);
17th Oct 2021, 2:21 AM
Arun Jamson
Arun Jamson - avatar
+ 4
Hi Devansh Mishra You can use clip-path to make different shapes on background. You can use gradient effects. Check this out, it might help you https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds https://code.sololearn.com/WhML78kGmg8U/?ref=app
16th Oct 2021, 8:35 PM
ShadowCipher
ShadowCipher - avatar
+ 2
#try this hope it'll work fine body{ background: linear-gradient(90deg,red,blue); }
16th Oct 2021, 8:59 PM
Jasy Fabiano
Jasy Fabiano - avatar
+ 2
Hi, you can use gradients for this
17th Oct 2021, 4:28 AM
Mahdi Bahadori
Mahdi Bahadori - avatar
+ 1
https://cssgradient.io/ this is good tool to make your gradiant look good, you can easy play with values
16th Oct 2021, 10:50 PM
PanicS
PanicS - avatar
+ 1
The background-color property doesn't let you put two or more background colors on a single element. But, you can achieve this using the background-image property. For example, if you want to set red and yellow color backgrounds, you can do something like this: div{ background-image: linear-gradient(red, yellow); height: 200px; } This will put a gradient of red and yellow color on the div element. You can find the detailed explanation here...... https://programmersportal.com/css-background-image-property/
17th Oct 2021, 4:08 AM
Bhaskar Rana
+ 1
Deva;nsh Mishra Background:green,red background-blend-mode:multiply;
17th Oct 2021, 7:51 AM
Sachin
Sachin - avatar