title: Is it possible to make a hard-edged gradient on a large element?
body: <p>I ran into a problem using a <code>linear-gradient</code> on a particularly large element.</p>
  
  <p>On smaller elements, a hard edge can be achieved with the following:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>background-image: linear-gradient(180deg, #000, #000 33%, #0f0 0);
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/5jVLw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5jVLw.png" alt="hard and soft edged gradients"></a></p>
  
  <p>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?</p>
  
  <p>HTML example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Edit</h2>
  
  <p>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):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Edit 2</h2>
  
  <p>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.</p>
  
  <h2>Edit 3</h2>
  
  <p>There is an open <a href="https://code.google.com/p/chromium/issues/detail?id=543625" rel="noreferrer">bug report</a> for chromium about this issue.</p>