CODEWITHSUNDEEP
cssgradientlinear-gradientsradial-gradients
MMJ
MMJ

Reputation: 309

CSS radial radiant banding

How can I fix gradient banding for this simple sharp radial-gradient(); code below

background-image: radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);


.whitebox{

	width: 300px; height: 300px;
		background-image: -webkit-radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
	background-image: -moz-radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
	background-image: -o-radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
	background-image: -ms-radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
		
	background-image: radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);



}
<div class="whitebox">

</div>

& Any solutions to avoid banding at all.

Upvotes: 0

Views: 661

Answers (1)

Cheslab
Cheslab

Reputation: 1924

Currently you're saying use color #838383 from 0% to 4%, color #161616 from 4% to 15% and so on. So there's no space between colors to smoothly flow from one to another. Set only one point for each color to let the gradient algorithm do his job:

.whitebox {
  width: 300px;
  height: 300px;
  background-image: radial-gradient(at center, #838383 0%, #161616 4%, #222222 15%, #3C3C3C 25%, #111111 40%, #B44B37 55%, #B44B37 100%);
}
<div class="whitebox"></div>

Or if you want some color to spread more space set two point but leave a gap between, for example 0%-4% for the first color, 8%-15% for the second and so on. In this case you'll see the actual gradient between 4% and 8%.

Also you can set a strict bound for the black color like so (depends on what you're going to achieve):

.whitebox {
  width: 300px;
  height: 300px;
  background-image: radial-gradient(at center, #838383 0%, #161616 4%, #222222 15%, #3C3C3C 25%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
}
<div class="whitebox"></div>

Upvotes: 1

Related Questions