Background Image, Linear Gradient Jagged Edged Result Needs to Be Smooth Edged

background image, linear gradient jagged edged result needs to be smooth edged

Unfortunately, this always happens when we use angled linear-gradient images and currently the only way to overcome this behavior seems to be to avoid hard-stopping of the colors (that is, don't make the stop point of one color as the start point of the next). Making the second color start a little farther away from the stop point of the first color would kind of create a blurred area and make it look more smoother. This is still not 100% perfect but is better than having jagged edges.

.lefttriangle {
  width: 100%;
  height: 10px;
  left: 0px;
  top: 0px;
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%); /* note the change of stop and start points */
}
.righttriangle {
  width: 100%;
  height: 10px;
  right: 0px;
  top: 0px;
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);  /* note the change of stop and start points */
}

body,html {  height: 100%}.image {  width: 1410px;  margin-right: auto;  margin-left: auto;  height: 500px;  overflow: hidden;  position: relative;}.pointer {  height: 50px;  position: absolute;  bottom: 0;  left: 0;  width: 100%;}.triangleWrapper {  width: 50%;  height: 50px;  float: left;}.lefttriangle {  width: 100%;  height: 10px;  left: 0px;  top: 0px;  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);}.righttriangle {  width: 100%;  height: 10px;  right: 0px;  top: 0px;  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);}

<div class="image">  <img src="http://placekitten.com/1410/500">  <div class="pointer">    <div class="triangleWrapper">      <div style="height: 100%;" class="lefttriangle"></div>    </div>    <div class="triangleWrapper">      <div style="height: 100%;" class="righttriangle"></div>    </div>  </div></div>

Ugly edge when using gradient

Giving a small gap between the two color stops points (like 49.5% and 50.5%) did the trick.

How to make gradients in Chrome smooth?

Reason:

As I had described in comments, when the end point of one color is the start point of another (that is, a hard-stop gradient), the change of colors is sudden and such a sudden change at an angle is known for producing rough edges even in other browsers (which has maybe got fixed by now). Giving a gap between end point of one color and start of the next produces a smoother change of color and thus minimises rough edges.

Not much experimentation is required for this (or trial and error), a 1 or 2% gap is almost always sufficient.

Workaround:

Changing the color stop points to produce a more smooth change of colors instead of giving it a hard stop seems to be helping.

body {  background-image: linear-gradient(45deg, red 24%, transparent 26%, transparent 74%, red 76%, red), linear-gradient(-45deg, red 24%, transparent 26%, transparent 74%, red 76%, red);  background-size: 60px 60px;  background-position: 0 0, 30px 30px;}

Smooth radial-gradient edge im stuck

your issue is right here:

radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 50px);

you need a pixel of separation between the transparent layer (rgba(0, 0, 0, 0))and the white layer (#fff) for this gradual curve to work:

radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 51px);

Should fix your issue. Radial gradients are tricky especially when you try to make some out-of-the-box shapes with them. :)

CSS / HTML gradient fill pattern is glitchy in Firefox

Rotating gradients have always had that problem for more on that check this question

One way to fix the issue is to not use angles at all, and make use of repeating gradients.

html {  height: 100%;  background:   repeating-linear-gradient(90deg, #fff 0px 10px, transparent 10px 20px),   repeating-linear-gradient(0deg, #000 0px 10px, #fff 10px 20px);  background-blend-mode: difference;}

Radial-gradient doesn’t create perfect circles

There are a few solutions to this, discussed in this Medium article by
Mandy Michael.

One elegant one is to use calc to add a single pixel of the second color, as seen below, which renders enough blur to offset the jaggedness.

div {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, blue 50%, pink calc(50% + 1px));
}

<div></div>

How can I prevent CSS gradient banding?

I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.

If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.

If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.

In Adobe Fireworks, I would export this as a PNG-24.

Good luck.

http://codepen.io/anon/pen/JdEjWm

#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
  background: -webkit-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -o-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white);
}

Background Image, Linear Gradient Jagged Edged Result Needs to Be Smooth Edged