CSS3 Radial Gradients using various background properties

Star

radial-gradient(rgba(51,51,51,0) 67.5%, rgba(220,220,255,1) 97.5%);

With background-color: rgb(51,51,51), background-position: -100px -100px and background-size: 200px 200px


Circles

radial-gradient(rgba(51,51,51,0) 47.5%, rgba(220,220,255,1) 97.5%);

With background-color: rgb(51,51,51), background-position: -100px -100px and background-size: 100px 100px


Corners

radial-gradient(50%, rgba(51,51,51,0) 37.5%, rgba(220,220,255,1) 57.5%, rgba(51,51,51,0) 77.5%)

With background-color: rgb(51,51,51), background-position: -100px -100px and background-size: 200px 200px


Trumpet 1

radial-gradient(-100%, rgba(51,51,51,0) 67.5%, rgba(220,220,255,1) 97.5%)

With background-color: rgb(51,51,51), background-position: -100px -100px and background-size: 200px 200px


Trumpet 2

radial-gradient(200%, rgba(51,51,51,0) 67.5%, rgba(220,220,255,1) 97.5%)

With background-color: rgb(51,51,51), background-position: -100px -100px and background-size: 200px 200px


Horseshoe 1

radial-gradient(-100%, rgba(51,51,51,0) 67.5%, rgba(220,220,255,1) 97.5%)

With background-color: rgb(51,51,51) and background-size: 200px 200px


Horseshoe 2

radial-gradient(200%, rgba(51,51,51,0) 67.5%, rgba(220,220,255,1) 97.5%)

With background-color: rgb(51,51,51) and background-size: 200px 200px


Combination trumpet 1 and horseshoe 1


Combination trumpet 2 and horseshoe 2