How to get two horizontal background colors in one div using linear gradient?

Question

I want to have two horizontal background colors in one div. I am using linear-gradient for that but problem here is the fading(mixing) effect between two colors. I want to remove that effect so that I have sharp colors next to each other without any gradient effect or border. Moreover tell me if this code of mine is correct and not likely to cause any problem with any browser I am not good at coding.

 background: -moz-linear-gradient( white 35%, black 65%);
 background: -webkit-linear-gradient( white 35%, black 65%);
 background: linear-gradient( white 35%, black 65%);

Have a look at http://stackoverflow.com/questions/27606260/blocky-gradient-effect-in-css3/27613861. You're looking for a hard-stop gradient where the start position of second color should be the same as end position of the one prior to it. — Harry, Dec 06 '15 at 12:00

Nenad Vracar · Accepted Answer · 2015-12-06T12:07:54.607

Try this https://jsfiddle.net/2Lzo9vfc/303/

 div {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(35%, rgba(255,255,255,1)), color-stop(35%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
}

Or instead of `rgba` if you want to set colors as `black` and `white` your code would look like this https://jsfiddle.net/2Lzo9vfc/304/ — Nenad Vracar, Dec 06 '15 at 12:17

score 2 · Answer 2 · answered Dec 06 '15 at 12:10

Bootstrap: If you want to put something on top of that just make position absolute for the other div.

.container-fluid {
  float: left;
}
#first {
  height: 100px;
  width: 600px;
  background-color: red;
}
#second {
  height: 100px;
  width: 600px;
  background-color: blue;
}
#third {
  height: 100px;
  width: 600px;
  background-color: green;
}
p {
  position: absolute;
  float: left;
  font-size: 9em;
}

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
  <title>HTML5, CSS3 and JavaScript demo</title>
</head>

<body>
  <!-- Start your code here -->

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12" id="first">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12" id="second">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12" id="third">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div>
    <p>some text</p>
  </div>

  <!-- End your code here -->
</body>

</html>

How to get two horizontal background colors in one div using linear gradient?

2 Answers2