How to make a dot gradient effect in CSS

Question

I'm trying to find a way to create a polkadot gradient effect that fades between 2 colors. It would be one solid color on the left, then the bubble/polkadot fade effect would transition until the rest of the image is a second solid color. The following links provide examples of what I mean. Can something like this be achieved in CSS?

Examples:

https://www.123rf.com/photo_82363325_stock-vector-halftone-pattern-comic-background-dotted-retro-backdrop-with-circles-dots-design-element-for-web-ban.html?fromid=c1RuREVxQmNKMW0yMUc3U05BdEZJQT09

http://www.hobart.k12.ok.us/JUST%20FOR%20STUDENTS.bak2/AP%20Club/retro-yellow.jpg

Did you try googling "polka dot pattern with CSS"? I did, and found several examples, although none of them have the linear gradient from one color to another. I would experiment with a combination of `radial-gradient` and `linear-gradient` and see what I came up with. Then, if I couldn't get it to work, I'd ask a question worded in such a way as to show what work I had done on it and ask where I was going wrong. Your question suggests that you haven't tried to get as far as you can on your own, and most people won't feel like helping you if you don't seem to want to do that. — BobRodes, Aug 06 '18 at 17:47

score 0 · Answer 1 · answered Aug 07 '18 at 00:32

CSS circle dot background

Its possible to create a radiant background with polka dots:

.container {
  width: 210px;
  height: 210px;
  background-image: 
    radial-gradient(circle at 0 0, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 30px 0, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 60px 0, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 90px 0, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 120px 0, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 150px 0, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 180px 0, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 210px 0, yellow 5%, transparent 5.1%),
    
    radial-gradient(circle at 0 30px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 30px 30px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 60px 30px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 90px 30px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 120px 30px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 150px 30px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 180px 30px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 210px 30px, yellow 5%, transparent 5.1%),
    
    radial-gradient(circle at 0 60px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 30px 60px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 60px 60px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 90px 60px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 120px 60px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 150px 60px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 180px 60px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 210px 60px, yellow 5%, transparent 5.1%),
    
    radial-gradient(circle at 0 90px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 30px 90px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 60px 90px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 90px 90px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 120px 90px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 150px 90px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 180px 90px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 210px 90px, yellow 5%, transparent 5.1%),
    
    radial-gradient(circle at 0 120px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 30px 120px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 60px 120px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 90px 120px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 120px 120px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 150px 120px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 180px 120px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 210px 120px, yellow 5%, transparent 5.1%),
    
    radial-gradient(circle at 0 150px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 30px 150px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 60px 150px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 90px 150px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 120px 150px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 150px 150px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 180px 150px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 210px 150px, yellow 5%, transparent 5.1%),
    
    radial-gradient(circle at 0 180px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 30px 180px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 60px 180px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 90px 180px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 120px 180px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 150px 180px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 180px 180px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 210px 180px, yellow 5%, transparent 5.1%),
    
    radial-gradient(circle at 0 210px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 30px 210px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 60px 210px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 90px 210px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 120px 210px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 150px 210px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 180px 210px, yellow 5%, transparent 5.1%),
    radial-gradient(circle at 210px 210px, yellow 5%, transparent 5.1%);
    
    background-color: #b6084c;
}

<div class="container">

</div>

But currently its not possible to animate background:

Use CSS3 transitions with gradient backgrounds

There are only workaround and hacks.

But this background and animation would be possible with SVG.
SVG is also better suited for complex graphics.

How to make a dot gradient effect in CSS

1 Answers1

CSS circle dot background