Photoshop Question posted in
The official user guide can be found here.

CSS linear gradient doesn't look like Photoshop's, can it be fixed?

While using a CSS black to transparent linear-gradient I noticed that it doesn’t gradually fade to transparent, instead it makes the grey area linger longer and only near the end it becomes transparent with a noticeable limit.

After noticing this I decided to use a photoshop gradient with the exact properties and it looked better, the gradient was changing from black to transparent smoothly and linearly.

The following contains an example showing a CSS linear-gradient on the left and Photoshop generated gradient on the right – Both were created with the exact same properties:

#css, #ps{
  height:100px;
  width:50%;
  }
#css{
  float:left;
  background:linear-gradient(black, transparent);
  }
#ps{
  float:right;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEUCAgIDAwMEBQUGBgYICAgJCQkLCwsNDQ0PDw8RERETExMVFRUXFxcZGRkbGxsdHh4gICAiIiIkJSUnJycpKiosLCwvLy8xMjI0NDQ3Nzc5Ojo8PDw/Pz9CQkJFRUVISEhLS0tOTk5RUVFUVFRXV1daWlpdXV1gYGBjY2NmZmZpamptbW1wcHBzc3N2dnZ5eXl8fX2AgICDg4OGhoaJiYmMjIyQkJCTk5OWlpaZmZmcnJyfn5+ioqKlpqaoqamrrKyvr6+ysrK0tbW3uLi6urq9vb3AwMDDw8PGxsbJycnLy8vOzs7R0dHT09PW1tbY2Njb29vd3d3g4ODi4uLk5OTm5ubp6enr6+vt7e3v7+/x8fHy8vL09PT29vb4+Pj5+fn7+/v8/Pz+/v4AAAE6GCMnAAAAY3RSTlP+/Pv5+Pb08vHv7evp5uTi4N3b2NbT0c7LyMbDwL26t7SxrquopaKfnJmWk4+MiYaDgHx5dnNwbGlmY2BdWldUUU5LSEVCPzw5NzQxLiwpJyQiHx0bGRYUEhAODQsJBwYEAwEIFXNRAAAAEElEQVQIHWNJZpnLwjj0IQCJ8QLzQI0QnQAAAABJRU5ErkJggg==");
}
<div id="css"></div>
<div id="ps"></div>

As you can see the difference is clearly visible. Is it possible to replicate Photoshop’s real linear-gradient into CSS’s or my only option is to use base64/png tricks to achieve an actual linear gradient?
Because currently css’s linear-gradient is everything but linear, in fact from what I can see it creates an easeInOut-gradient instead of linear.

Tags:

2

Answers


  1. 0

    You can do following:

    background:linear-gradient(black, transparent, transparent);

    or

    background:linear-gradient(black 10%, transparent);

    10% of space is taken by black.

    Hope this helps.

    Login or Signup to reply.
  2. 0

    As GRC says, you can set multiple midpoints values to adapt the gradient to your exact needs

    A good starting point is colorzilla, where you can import an image file and get an automated result.

    For your image, the result is: 

    .test {
    height: 100px;
    background: #020202; /* Old browsers */
    background: -moz-linear-gradient(top,  #020202 0%, #1f1f1f 9%, #434343 18%, #989898 38%, #b2b2b2 45%, #d1d1d1 56%, #e9e9e9 67%, #f2f2f2 73%, #f9f9f9 80%, #fdfdfd 87%, #fefefe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#020202), color-stop(9%,#1f1f1f), color-stop(18%,#434343), color-stop(38%,#989898), color-stop(45%,#b2b2b2), color-stop(56%,#d1d1d1), color-stop(67%,#e9e9e9), color-stop(73%,#f2f2f2), color-stop(80%,#f9f9f9), color-stop(87%,#fdfdfd), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020202', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
    <div class="test"></div>

    The problem is that this tool gives only rgb values, you will need to manually convert those to rgba, and play with the alpha values.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search