Search code examples
cssgradientlinear-gradients

Is it possible to make a hard-edged gradient on a large element?

I ran into a problem using a linear-gradient on a particularly large element.

On smaller elements, a hard edge can be achieved with the following:

background-image: linear-gradient(180deg, #000, #000 33%, #0f0 0);

However when the element has a very large height, the edge is soft. You can see in the following image and example below, the second version has a soft edge when the element is very large and the same gradient is applied.

hard and soft edged gradients

I have tried many variations on the linear gradient and have been unable to achieve a hard edge on the large version. Is there a way to apply a gradient with a hard edge on a large element?

HTML example:

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
div:first-child {
  height: 100px;
}
<div></div>
<div></div>

Edit

The goal of this gradient is for use with another background image, so I prefer techniques that are compatible with the following (don't cover the image):

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: url(http://placehold.it/600x20), linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
<div></div>

Edit 2

Thanks to @Tarun, this appears to be browser related. The above image is a screenshot from Chromium 45. Safari and Firefox appear to render correctly.

Edit 3

There is an open bug report for chromium about this issue.

Solution

  • I've found an alternative using gradients to achieve the same effect, however I think it should be possible to achieve this with 1 gradient, so I consider this a work-around.

    The trick is to use multiple backgrounds with 2 gradients that don't change color. Then just define background-size to achieve the hard edge effect. See the working snippet:

    div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: linear-gradient(#000, #000), linear-gradient(#0f0, #0f0);
  background-size: 100% 20px, 100%;
}
div:first-child {
  height: 100px;
}
    <div></div>
<div></div>