Linear-Gradient Not Working in Chrome

linear-gradient not working in Chrome

First of all note that -webkit-gradient was intended by Apple and implemented in 2008 in Webkit based web browsers (for instance Safari 4) which has a pretty different syntax than the W3C standard:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

For instance:

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));

This is why you couldn't get it to work in your case.

A year later Mozilla introduced -moz-linear-gradient (since Firefox 3.6) which has also a different syntax than the old Webkit version but then it implemented in Webkit under -webkit-linear-gradient:

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)

However the W3C standard version of linear-gradient is quiet different, the formal syntax of linear-gradient() expression is:

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

As can be seen in your posted code, the other mistake is the lack of to <side> in the W3C version. Therefore, in your case it should be:

Example Here.

background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%,#fff), color-stop(100%,transparent)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* Chrome10+, Safari5.1+ */
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);    /* FF3.6+ */
background: linear-gradient(to left, transparent 0%,#fff 50%,transparent 100%);      /* W3C */

Why this gradient is not properly rendering on Chrome?

It might be a Safari bug, actually. rgba(30, 113, 212, 0) is the same "color" as rgba(12, 34, 56, 0) (for example), because there is only one "color" with the alpha value 0: the transparent "color".

So Chrome (and Firefox) are trying to interpolate between #043a5f (the background color, effectively invisible), and transparent (effectively invisible). Because transparent has no hue, the only variable that changes throughout the gradient is the alpha channel value.

You can specify three steps in your gradient to achieve the desired result:

background-image: linear-gradient(180deg, transparent, rgb(30 113 212), transparent);

webkit-linear-gradient not working on chrome

Newer browsers don't implement vendor prefixes to use that features. You just need to use standard declaration too:

center top will not work in chrome browser.

Try this:

background: linear-gradient(to bottom, #FED066 0%, #FDB73D 100%);

I always use the gradient-generator tool to set gradient for cross browser implementation.

CSS Gradient Not Working In Chrome 49

Normally, the body tag by itself doesn't have any height and so the gradients won't show up and we have to either add some content to it (or) give it some explicit height. Adding a fixed height value may not always be possible and so it is better to add a min-height: 100vh (that is, the height will atleast be as much as the viewport's height).

Note: The behavior is consistent across IE, Edge, Firefox and Chrome. I am trying to find why Safari handles it differently. I will edit the information into the answer once I have it.

body {  min-height: 100vh;  background: rgba(121, 91, 176, 1);  background: -moz-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(121, 91, 176, 1)), color-stop(66%, rgba(74, 193, 255, 1)), color-stop(92%, rgba(76, 234, 255, 1)), color-stop(100%, rgba(76, 234, 255, 1)));  background: -webkit-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);  background: -o-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);  background: -ms-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);  background: linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#795bb0', endColorstr='#4ceaff', GradientType=1);}

CSS background gradient not working in Google Chrome

Using a tool I made to generate CSS gradients, this is the CSS for a gradient from #222222 to #111111, with support for all browsers:

background: #222222;
background: -moz-linear-gradient(top, #222222 0%, #111111 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#111111));
background: -webkit-linear-gradient(top, #222222 0%,#111111 100%);
background: -o-linear-gradient(top, #222222 0%,#111111 100%);
background: -ms-linear-gradient(top, #222222 0%,#111111 100%);
background: linear-gradient(to bottom, #222222 0%,#111111 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#111111',GradientType=0 );

Here is a working JSFiddle.

Gradient not working in Chrome, but works in Firefox

The -webkit-gradient property is deprecated. Use the new gradient syntax:

 background: -webkit-linear-gradient(#000, #888);

CSS Linear Gradient not showing up in Chrome, Safari

Don't put your links to style sheets inside a style tag.

<head>
<link rel="stylesheet" href="styles.css" type = "text/css">
</head>

Is how it should be.
Your code otherwise works just fine.

---

Related Topics