Geek Answers Handbook

Make a radial gradient radius of 200px

How to make a radius of 200px in width and height? I read that this can be done in units of pixels, but each attempt failed.

background-image: -webkit-radial-gradient(75% 100%, circle farthest-corner, #ffffff, #ff7ae9 33%); background-image: -o-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%); background-image: -ms-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%); background-image: radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%) background-image: -moz-radial-gradient(75% 19%, circle farthest-corner, #ffffff, #ff7ae9 33%);
+4
source share
1 answer

edit : all vendor prefixes added to make them clearer

 background-image: -moz-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); background-image: -webkit-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); background-image: -o-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); background-image: -ms-radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px); background-image: radial-gradient(50px 100px, circle farthest-corner, #ffffff, #ff7ae9 200px);

In this example, “200px” is the size of the circle, any standard CSS units such as px, em or percentages are accurate.

"50px 100px" is the position of the center of the circle, it works the same as the background-position , so values ​​like "left top 'are also good.

There are several online generators that can help you with all the prefixes of a particular provider.

ps
@Mohsen's pixel values ​​are beautiful, MDN says:

either a percentage from 0% to 100%, or a length along the axis of the gradient

If you press " length , it says

CSS syntax for length is a number that immediately follows a block. Space between number and unit is not allowed.

+5
source

More articles:


All Articles