Is it possible to make a gradient with a hard edge on a large element?

Question

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

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

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

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

I tried many variations of the linear gradient and could not achieve a sharp advantage in the large version. Is there a way to apply a hard edge gradient to 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 purpose of this gradient is to use it with a different background image, so I prefer methods that are compatible with the following (do not close 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 is browser related. Image above is a screenshot from Chromium 45. Safari and Firefox display correctly.

Edit 3

There is an open bug report for Chromium on this issue.

Answer 1

I 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 find this workaround.

The trick is to use multiple backgrounds with two gradients that do not change color. Then just define the background-size to get a hard edge effect. See 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> 

Answer 2

You can use the window shadow for the same effect.

 div { height: 5000px; } div { background: #0f0; box-shadow: inset 0 100px 0 0 #000; } 

 <div></div> 

Answer 3

This works for me.

 background: linear-gradient(to bottom, black 0% ,black 20% ,green 20% ,green 100%); 

edit: I tried to do exactly what you are doing in the question, and I get a solid edge in both fields. Your problem should be related to your browser.

edit 2: confirmed

Answer 4

You can use a little more code space and set up your gatekeeper as follows:

 background: #4c4c4c; background: linear-gradient(to bottom, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); 

A solid background setting is there to make sure your page shows some color if the browser somehow does not support this type of gardient or its filter.

It is also recommended that you include -moz, -o, and other browser-based fixes.

Answer 5

You need to repeat every color and every linear-gradient percentage in a tricky but expressive way. Let's look at a six-color example to understand the principle. This approach works for any block size.

 div { height: 100px; background-repeat: no-repeat; margin-bottom: 1em; background-image: linear-gradient(90deg, red, red 17%, orange 17%, orange 34%, yellow 34%, yellow 51%, black 51%, black 68%, green 68%, green 85%, blue 85%); } 

 <div></div>