Css radial gradient, new syntax

Question

I had a perfectly valid (judging by the look) radial gradient :

.square {
    background-color: #f0d9b5;
    color: #b58863;
    width: 80px;
    height: 80px;
    float: left;
    position: relative;
}

.grad:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00f;
    background: -webkit-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%);
    background: radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%);
    background: -ms-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%);
}

<div class="square grad"></div>

I had no problem with it, till I found that all these prefixes are not needed for a gradient.. Removing them actually removes the gradients in corresponding browsers. It looked like the problem is that there is another (newer) syntax for css gradient.

The problem is that if change my background to:

background: radial-gradient(circle at 50% 50% , #00f 0%, #fff 100%); the result looks different:

.square {
    background-color: #f0d9b5;
    color: #b58863;
    width: 80px;
    height: 80px;
    float: left;
    position: relative;
}

.grad-first:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00f;
    background: -webkit-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%);
    background: radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%);
    background: -ms-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%);
}

.grad-second:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00f;
    background: radial-gradient(circle at 50% 50% , #00f 0%, #fff 100%);
}

<div class="square grad-first"></div>
<div class="square grad-second"></div>

Which looks like it is removing my first background on .square. How can this be changed?

Answer 1

Your mistake was specifying #fff as the color stop. That creates a solid white color stop, rather than a transparent one. There are no other cross-browser issues with the old and new radial gradient syntaxes that I am aware of.

Note that changing it to rgba(255, 255, 255, 0) can have a different result than changing it to rgba(0, 0, 255, 0) in some browsers like Firefox. This may be due to how Firefox interpolates transparent color stops depending on their RGB values. Use rgba(0, 0, 255, 0) (transparent blue) in order to get consistent results across all browsers:

background: radial-gradient(circle at 50% 50% , #00f 0%, rgba(0, 0, 255, 0) 100%);

(You can also change #00f to rgba(0, 0, 255, 1) for consistency if you like, but it's not absolutely necessary.)

.square {
    background-color: #f0d9b5;
    color: #b58863;
    width: 80px;
    height: 80px;
    float: left;
    position: relative;
}

.grad-first:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00f;
    background: -webkit-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%);
    background: radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%);
    background: -ms-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%);
}

.grad-second:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #00f;
    background: radial-gradient(circle at 50% 50% , #00f 0%, rgba(0, 0, 255, 0) 100%);
}

<div class="square grad-first"></div>
<div class="square grad-second"></div>