Are solid gradients not very solid? Do not have clear edges when stopping color

Question

In CSS, this is apparently the easiest way to create solid gradients where colors end and start suddenly when the color stops. Example -

background-image:linear-gradient(to bottom, gray 100px, white 0); /*Let the browser decide*/

OR

background-image:linear-gradient(to bottom, gray 100px, white 100px); /*Explicitly specify.*/

What happens is that the gradient is created, but in fact it does not have clear edges with which the colors meet. My assumption was that the code would stop the gray at a speed of 100 pixels and start white immediately after it.

But it turns out that it's still a little blurry. I gave an example below (view it as a Full Page ). In the center of the screen, where gray and white meet, you can see the difference.

• Why is this happening? Is it because of what computing needs to do with browsers?
• Any way to get absolute sharp edges where colors meet?

Edit - Even pixel values ​​are of little use.

 * { margin: 0; padding: 0; box-sizing:border-box; } html, body { height: 100%; } body { background: linear-gradient(to bottom, #999 10em, white 0) } .container { width: 50%; height: 100%; } .gradient { background: #999; height: 10em; } 

 <div class="container"> <div class="gradient"></div> </div> 

Answer 1

As mentioned in the comments by @ Mr Lister , it seems like a bug with Chrome. Search your Mac machine to see if it matches safari. That way I can raise an error for both.

Answer 2

This seems to be a common mistake. It appears not only in Chrome (the last FF has it), although different browsers / engines have different symptoms and scale.

For example, a blurry edge will grow if you apply a “straight-line” linear gradient to a very large element.

See my jsfiddle test case: http://jsfiddle.net/matvey_andreyev/ufadpo1n/ Chrome behaves rather strangely with a very high element.

Code itself:

 <div class="padding"> <div id="gradient"></div> <div class="controls"> <div class="part"> <h3>Demo of a blurry edge where a straight one is expected</h3> <strong>linear-gradient</strong>( to bottom, transparent, <br />transparent <input class="tool" type="text" id="edge1" value="50px" />, <input type="text" class="tool" id="color2_1" value="#d00" /> <input type="text" class="tool" id="edge2" value="50px" />, <input type="text" class="tool" id="color2_2" value="#d00" /> <input type="text" class="tool" id="edgeLast" value="100%" />) <br/> <strong>height:</strong> <input type="text" class="tool2" id="height" value="300px" /> </div> <div class="part"> <h4>Some preset examples</h4> <p><span class="preset" id="default">default values</span> </p> <p><span class="preset" id="bigLast">10000px position of the last color stop</span> </p> <p><span class="preset" id="edge1greater">1st color stop greater than second</span> </p> <p><span class="preset" id="skyscraper">Set great height to the #gradient</span> </p> <p>Don't forget viewing in different browsers.</p> </div> </div> </div> <style type="text/css"> html, body { min-height:100%; margin:0; padding:0; } .padding { padding:20px; background-color:#ddd; position:relative; height:calc(100%); } #gradient { height:300px; background-position:0 0; background-image: linear-gradient(to bottom, transparent, transparent 50px, #d00 50px, #d00 100%); border-style:dotted; border-width:1px; border-color:#fff; } .controls { background-color:#fff; padding:30px 30px 15px; font-size:13px; color:#444; box-shadow:1px 1px 3px rgba(0, 0, 0, 25); max-width:500px; position:absolute; top:30px; right:30px; } h3 { margin:0 0 .5em; } h4 { margin:0; } .tool, .tool2 { width:40px; } .preset { cursor:pointer; color:#00d; border-style:dashed; border-width:0 0 1px; } .preset:hover { color:#d00; } .part { margin:0 0 15px; } </style> <script type="text/javascript"> $(document).ready(function () { var $edge1 = $('#edge1'), $edge2 = $('#edge2'), $color2_1 = $('#color2_1'), $color2_2 = $('#color2_2'), $edgeLast = $('#edgeLast'), $gradient = $('#gradient'), $height = $('#height'), defaultGrad = $gradient.css('background-image'), defaultHeight = $gradient.css('height'), setDefaultValues, changeGrad, changeHeight; setDefaultValues = function setDefaultValues() { $gradient.css({ 'background-image': defaultGrad, 'height': defaultHeight }); $edge1.val('50px'); $edge2.val('50px'); $edgeLast.val('100%'); $color2_1.val('#d00'); $color2_2.val('#d00'); $height.val(defaultHeight); } changeGrad = function changeGrad() { $gradient.css({ 'background-image': 'linear-gradient(to bottom, transparent, transparent ' + $edge1.val() + ', ' + $color2_1.val() + ' ' + $edge2.val() + ', ' + $color2_2.val() + ' ' + $edgeLast.val() + ')' }); } changeHeight = function changeHeight() { $gradient.css({ 'height': $height.val() }); } $('.tool').on('focus blur keyup change', changeGrad); $('.tool2').on('focus blur keyup change', changeHeight); $('#default').click(function () { setDefaultValues(); changeGrad(); }); $('#bigLast').click(function () { setDefaultValues(); $edgeLast.val('10000px'); changeGrad(); }); $('#edge1greater').click(function () { setDefaultValues(); $edge1.val('55px'); changeGrad(); }); $('#skyscraper').click(function () { $height.val(50000 + 'px'); changeHeight(); }); }); </script> 

At the moment, there seems to be no real answer to this question. I ended up using a background image instead of a linear gradient at the ends.