How to add a Gradient point with CSS in the background?

Question

Is it possible using just HTML and CSS to create a gradient dot in the background?

This should be quite easy to do with the IMG, but is there also a pure CSS variant?

Example

Thanks! :)

Answer 1

Yes you can use something like this:

background: rgb(3,164,153);
background: radial-gradient(circle, rgba(3,164,153,1) 0%, rgba(3,164,153,0.3660057773109243) 35%, rgba(3,164,153,0) 100%);

radial-gradient is used to create circular or elliptical gradients. I am keeping the color constant (rgba(3,164,153,1)) while increasing the transparency.

You can read more about radial-gradient here: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient

Also, I used this tool to create the gradient: https://cssgradient.io/

Answer 2

you can use radial-gradient property.

background: radial-gradient(#cfb37a, transparent);