6

I want to make a radial gradient where the transparency changes, I can get it to work linearly but not radially

background: -webkit-gradient(linear, left top, left bottom,from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)));

This code works linearly but when changed to 

background: -webkit-gradient(radial, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)));

stops working

What do I need to do to change this, all the help so far only shows linear gradients

Tristan Warren
  • 435
  • 1
  • 7
  • 17

2 Answers2

14

Your syntax for radial-gradient is wrong.

You would need to write something like this: background-image: radial-gradient(ellipse farthest-corner at 45px 45px, rgba(50, 50, 50, 0.8) 0%, rgba(80, 80, 80, 0.2) );

Check the MDN docs for more detail.

Josh Rutherford
  • 2,683
  • 1
  • 16
  • 20
4

There is a nice online tool at angrytools.com that helps you create radial gradients with transparency. It will produce CSS for you for different browsers.

Tomasz Nguyen
  • 2,561
  • 22
  • 25