Blocky Gradient Effect in CSS3

Blocky gradient effect in CSS3

This can be achieved using linear-gradient. Setting multiple colors to the gradient can be done by assigning multiple color stops and the blocky effect can be achieved by making the next color start at the exact same place where the current color ends (that is, same stop percentage for the current color's end position and the next color's start position).

In standards compliant browsers, the following is the only line of code that would be needed:

background: linear-gradient(to right, green 20%, 
                            yellowgreen 20%, yellowgreen 40%, 
                            yellow 40%, yellow 60%, 
                            orange 60%, orange 80%, red 80%);

However, in-order to produce a similar effect in older browser versions, we have to include the vendor prefixed versions also.

div {  height: 20px;  width: 450px;  background: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.2, green), color-stop(0.2, yellowgreen), color-stop(0.4, yellowgreen), color-stop(0.4, yellow), color-stop(0.6, yellow), color-stop(0.6, orange), color-stop(0.8, orange), color-stop(0.8, red));  background: -webkit-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%);  background: -moz-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%);  background: -o-linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%);  background: linear-gradient(to right, green 20%, yellowgreen 20%, yellowgreen 40%, yellow 40%, yellow 60%, orange 60%, orange 80%, red 80%);}

<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);
}

CSS3 Liner Gradient solid color size

Here's fiddle!

CSS:

background: linear-gradient(135deg,  #ff0000 33%,#00ff00 33%,#00ff00 67%,#00ff00 67%,#0000ff 67%);

Advance gradient effect button CSS3

It's actually possible, but not with css gradient only.

You have to use an SVG for the curve, hover a gradient to have this effect.

.button {  display: inline-block;  padding: 0.5em 1em;  border-radius: 5px;  border: 1px solid #FAB14C;    /* Two background image: a SVG curve hover a linear-gradient */  background-image:     url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,80 C50,100 50,0 100,20 L100,100 L0,100" fill="%23FAB14C"></path></svg>'),    linear-gradient(to top, #FAB14C, white);    /* The backgrounds are stretch to the element size */  background-size: 100% 100%;  background-repeat: no-repeat;    text-transform: uppercase;  font-family: sans-serif;  cursor: pointer;}

<button type="button" class="button">  Edit this article</button>

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.

Background gradient breaks in Chrome when element is taller than about 32,000 pixels

Ok, this is kind of peculiar and clearly down to a bug in Chrome

If you remove the border from your styling it miraculously works fine:

http://jsfiddle.net/hBm4C/2/

.gradient-tall {
width: 150px;
height: 35000px;
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#f5f5f5));
vertical-align: top;

}

To have the gradient and a border as well can be achieved by using box-shadow:

.gradient-tall {
    width: 150px;
    height: 35000px;
    display: inline-block;
    box-shadow:0 0 0 1px #777;
    background:#ccc;
    background-image:-webkit-linear-gradient(#ccc 1%, #f5f5f5 99%);
    vertical-align: top;
}

http://jsfiddle.net/hBm4C/3/

How to mark gradient effect on background as important?

You can't set a single argument of an attribute as !important.

But if you are looking for a way to add a constant overlay to your images, you can use pseudo-elements:

.pic {
  /* change the image to whatever you want */
  background-image: url(https://picsum.photos/100/100);
  
  width: 100px;
  height: 100px;
  position: relative;
}

.pic::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* image overlay, will always be on top of whatever image */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 20%, #000000 80%);
}

<div class="pic"></div>

Blocky Gradient Effect in CSS3