Search code examples
htmlcsscolorsgradienteffects

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

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! :)

Solution

  • 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/