Hard Edged Gradient in CSS

Is it possible to make a hard-edged gradient on a large element?

I've 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 consider this a work-around.

The trick is to use multiple backgrounds with 2 gradients that don't change color. Then just define background-size to achieve the hard edge effect. See the 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>

Hard edged gradient in css?

What about multiple gradient like this:

.line {

  height:5px;

  background-image:

    linear-gradient(red,red),

    linear-gradient(blue,blue),

    linear-gradient(yellow,yellow),

    linear-gradient(purple,purple);

  background-size:

    calc(1 * (100% / 4)) 100%,

    calc(2 * (100% / 4)) 100%,

    calc(3 * (100% / 4)) 100%,

    calc(4 * (100% / 4)) 100%;

  background-repeat:no-repeat;

}

<div class="line">

</div>

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>

Adding horizontal and vertical fading gradients on an element

You can use multiple gradient to simulate this:

body {

  height:100vh;

  margin:0;

  background:

   linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0)),

   linear-gradient(to right,black,white);

}

Solid gradients not really solid? Don't have crisp edges at color stops

As @Mr Lister mentioned in comments, looks like a bug with Chrome. Finding a Mac machine to see if it's the same with safari too. That way I can raise a bug for both.

CSS gradients one sharp color

Simply make the percentages the same.

From CSS Mine:

The above-mentioned color patterns make use of the so-called sharp transition, which is not really a transition because there is a sharp edge between colors:

background: linear-gradient(to bottom, transparent, lightgreen 33%, darkgreen 33%)

See cdpn.io/e/licEd

For a 30% indicator:

.completion-indicator {

  width: 50px;

  height: 50px;

  background: linear-gradient(to right, green 30%, transparent 30%);

  border-radius: 50%;

  border: 1px solid lightgrey;

  display: flex;

  justify-content: center;

  align-items: center;

}

.completion-indicator::before {

  content: '\2714';

  color: grey;

}

<div class="completion-indicator"></div>

Blurry linear gradient stops in chrome

Not a fix to the problem, just a workaround… you can use multiple gradients as multiple backgrounds of a small enough size as to not trigger the problem (< ~300px seems to do it). Combine with background-size and background-position and you get something that is ugly, but works:

background-image:
    linear-gradient(to bottom, #383937 0, #001500 35px, #ffffff 35px, #b0b0b0 150px),
    linear-gradient(to bottom, #963 0, #abc 150px);
background-size:
    100px 150px,
    100px 150px;
background-position:
    0 0,
    0 150px;
background-repeat: no-repeat;

See JSFiddle for demo.

---

Related Topics