How create two different colour background? | Sololearn: Learn to code for FREE!

+1

How create two different colour background?

10/16/2021 2:21:33 PM

Devansh Mishra

12 Answers

New Answer

+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%);

+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

+2

#try this hope it'll work fine body{ background: linear-gradient(90deg,red,blue); }

+2

Hi, you can use gradients for this

+1

https://cssgradient.io/ this is good tool to make your gradiant look good, you can easy play with values

+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/

+1

Deva;nsh Mishra Background:green,red background-blend-mode:multiply;