0

I am trying to highlight a square with radial gradient effect. I created the following css rule:

.highlight-move {
    background-color: #75f547;
    background-image: -webkit-radial-gradient(center center, circle cover, #75f547, #fff 100%);
    background-image:         radial-gradient(center center, circle cover, #75f547, #fff 100%);    
}

The problem is that my gradient is not transparent: jsFiddle and therefore I have a white background on the square.

I thought that I would be able to fix it with rgba, but as you see in the fiddle it does not work. How can I make my gradient transparent?

One additional important problem is not to highlight the piece on that color: thanks to Hashem for his :after solution.

Salvador Dali
  • 214,103
  • 147
  • 703
  • 753

1 Answers1

1

Actually you are overriding the background color of the square itself so that the rgba() won't give the desired effect in that case.

You could use pseudo-elements to apply the gradient on top of the square as follows:

EXAMPLE HERE

.highlight-move:after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0; /* set dimensions up to the parent */

    background: #75f547;
    background: -webkit-radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
    background:         radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);
}
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Thank you. This works amazing, but is there any other way to achieve this? The problem is that it also highlights the piece standing on that color: http://jsfiddle.net/ek1u9kL2/4/ . Sorry, I have not thought about it. – Salvador Dali Aug 30 '14 at 08:33
  • @SalvadorDali Yes there is. However you can fix that by adding a higher `z-index` to the pieces like so: `.highlight-move img { position: relative; z-index: 2; }`. **[EXAMPLE HERE](http://jsfiddle.net/hashem/ek1u9kL2/5/)** – Hashem Qolami Aug 30 '14 at 08:37
  • The other solution is creating two classes for two cases of cells having different background color. In each one, you have to change `rgba(255, 255, 255, 0)` with the background color of the cell. **[Updated Demo](http://jsfiddle.net/hashem/ek1u9kL2/7/)** – Hashem Qolami Aug 30 '14 at 08:40