Is it possible to have two background colors for a single html element? [duplicate]

Question

I am trying to add 2 different background colors to the same css class.

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 4px;
    background-color: #d6d6c2;
    z-order: 0;

}

Is it possible to have one background color for the first 50%(Considering total width) and another background color to the remaining? If it can`t be achived, can anyone suggest me a trick to achive this?

Royston

use background: linear-gradient(red, yellow); two different color – Triumph

Answer 1

Simply use linear-gradient as background and you can easily adjust the direction, colors, % of each color:

body {
  margin: 0;
  background: linear-gradient(to right, red 50%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}

some content

body {
  margin: 0;
  background: linear-gradient(to bottom, red 60%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}

some content

Or with pseudo-element and simple background-color then simply control the position/size of pseudo-element to control both background:

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: blue;
  z-index:-1;
}

some content

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 40%;
  left: 0;
  right: 0;
  background: blue;
  z-index:-1;
}

some content

If you want more

You can combine different color inside gradient and also use multiple linear-background in order to achieve more complex color division for your background:

body {
  margin: 0;
  background:linear-gradient(30deg, red 50%, blue 50%, blue 70%,orange 70%) left/50% 100% no-repeat,              
              linear-gradient(-30deg, red 50%, blue 50%, blue 70%,orange 70%) right/50% 100% no-repeat;
  
  height:100vh;
  text-align:center;
  color:#fff;
}

some content

You can also do the same with pseudo element and also use some CSS transform (rotation, skew, etc):

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: 50%;
  background: blue;
  transform: skew(30deg);
  z-index: -1;
}

body:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: -50%;
  background: orange;
  transform: skew(-30deg);
  z-index: -1;
}

some content

Fated

Excellent answer! However, when I change the percentages in the first code (to 30% and 70%), the centre of both the colours appears blurry like this (link to CodePen). Could you tell me how to maintain the solid property when the percentages are changed? – Dissatisfaction

@Dissatisfaction you always keep the second percentage 0 and you only change the first one – Fated

This works perfectly fine on IE but how can i get this work on different browsers? If I set the bottom to 33%, it looks greater than 50% in other browsers – Whitehall

Answer 2

You can use background gradients for that.

.stepwizard-row:before {
    background-image: linear-gradient(to right, #f00 50%, #ff0 50%)
}

Check this fiddle: https://jsfiddle.net/Lecazndk/

With that you can also create interesting effects and also use more than two colors.

https://jsfiddle.net/Lecazndk/1/

A good example of this usecase is the hero header on the Stripe website: https://stripe.com/

Gratin

Answer 3

You can add a position relative div with pseudo class of absolute position at 50% height.

Example:

.the-double-color {
  height:100vh;
  background-color:red;
  position:relative;
  width:100%;
}

.the-double-color:before {
  content:'';
  background-color:blue;
  position:absolute;
  top:0px;
  height:50%;
  width:100%;
}

Here is the pen

Forwards