Home/ Questions/Q 6655433
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T01:31:08+00:00

Given the following HTML: <body><div class=container></div></body> and CSS: body { background-color: #e9f9e9; } .container

  • 0

Given the following HTML:

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

and CSS:

body {
  background-color: #e9f9e9;
}

.container {
  height: 200px;
  width: 200px;
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #fcfffc), color-stop(100%, #e9f9e9));
  background: -webkit-radial-gradient(#fcfffc, #e9f9e9);
  background: -moz-radial-gradient(#fcfffc, #e9f9e9);
  background: -o-radial-gradient(#fcfffc, #e9f9e9);
  background: -ms-radial-gradient(#fcfffc, #e9f9e9);
  background: radial-gradient(#fcfffc, #e9f9e9);
}

The edges of the radial gradient do not match the final color stop, and thus does not match the containing element’s background color (which is the same as the gradient’s final color stop), causing an abrupt color change at the edge of the <div>. How can this be avoided?

Screenshot with adjusted contrast & saturation to make the problem obvious: Screenshot with adjusted contrast & saturation to make the problem obvious

View live on jsFiddle. Verified to occur on OS X 10.7 in Chrome 14 & 16, Safari 5.1, Firefox 7 & 9a2; Windows 7 in Chrome 14 & 16, Firefox 7 & 9.0a2.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s because, according the specs the default value for the size argument of the radial gradient function is a cover, so the circle positioned so that it tries to cover all the square area with pixels that have alpha > 0.

    So, to fix it, set this argument to contain: http://jsfiddle.net/kizu/FZAJM/1/ — and it would be fixed.

    • 0