title: How to create halftone effect in images with pure CSS?
body: <p>This is my CSS code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;TITLE&gt;My Page&lt;/TITLE&gt;
  &lt;head&gt;
  &lt;style&gt;
  .retroimage1 {
  filter: blur(0.5px) grayscale(100%);
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;img class="retroimage1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Volvo_740_GLE_%289166377791%29.jpg/180px-Volvo_740_GLE_%289166377791%29.jpg"&gt;
  &lt;p&gt;VOLVO 740 TURBO, red, Mitsubishi turbo  fitted to Volvo engine £2,300&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I want to try and do is make the image both grayscale and have dots on it - like the images below
  of a printed page.</p>
  <p>Using only CSS with no Javascript, how can I achieve this halftone in my HTML:</p>
  <p><a href="https://i.stack.imgur.com/lzt7y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lzt7y.jpg" alt="MG magazine scan" /></a></p>
  <p><a href="https://i.stack.imgur.com/DZRIA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DZRIA.jpg" alt="Ford Sierra halftone image from magazine scan" /></a></p>
  <p>in addition to the grayscale filter (the original image had sepia in this scan).</p>
  <p>I would appreciate any help, been trying on my own and looking on Google but getting nowhere with this. New-ish to filters in CSS, appreciate any help.</p>