Blocky gradient effect in CSS3

by

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>

For IE 9 and lower, we would have to use filters like mentioned in this CSS Tricks article because they don’t support linear-gradient.

Can I Use – Linear Gradients

More Related Contents:

  1. Gradient text color
  2. background image, linear gradient jagged edged result needs to be smooth edged
  3. SVG gradient using CSS
  4. How can I prevent CSS gradient banding?
  5. CSS gradient checkerboard pattern
  6. Using percentage values with background-position on a linear-gradient
  7. Use CSS3 transitions with gradient backgrounds
  8. Speech bubble with arrow
  9. How to remove the stripes that appears when using linear gradient property [duplicate]
  10. Gradient borders
  11. Control the dashed border stroke length and distance between strokes
  12. CSS transparent curved shape with two rounded sides
  13. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  14. Is it possible to create an angled corner in CSS?
  15. How to draw a circle sector in CSS?
  16. How to create a curve on the top of a background?
  17. Outlining and partially filling an SVG Shape
  18. Hexagon shape with CSS3
  19. Align text on slanted line
  20. Can you add noise to a CSS3 gradient?
  21. Using CSS, can you apply a gradient mask to fade to the background over text?
  22. How to make a circle around content using CSS?
  23. css text gradient
  24. How to create a radial menu in CSS?
  25. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  26. Arrow Box with CSS
  27. How to add animated gradient to an svg path?
  28. Make CSS3 triangle with linear gradient
  29. Creating an Isoceles Trapezoid shape
  30. Creating a droplet like border effect in css

Leave a Comment