How to create halftone effect in images with pure CSS?

Question

This is my CSS code:

<TITLE>My Page</TITLE>
<head>
<style>
.retroimage1 {
filter: blur(0.5px) grayscale(100%);
}
</style>
</head>
<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">
<p>VOLVO 740 TURBO, red, Mitsubishi turbo  fitted to Volvo engine £2,300</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.

Using only CSS with no Javascript, how can I achieve this halftone in my HTML:

in addition to the grayscale filter (the original image had sepia in this scan).

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.

i think you should check this answer also https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css — Maulik, Jun 21 '20 at 11:37

score 1 · Answer 1 · answered Jun 21 '20 at 15:08

I think this is what you need:

https://codepen.io/ycw/pen/NBjqze

HTML

<h1> 
  <select id="elStyle">
    <option>original</option>
    <option selected="selected">char</option>
    <option>dots</option>
    <option>emoji</option>
    <option>line</option>
  </select>
  <select id="elSample">
    <option selected="selected">cat</option>
    <option>face</option>
  </select>
  <select id="elKernel">
    <option>3</option>
    <option selected="selected">5</option>
    <option>7</option>
    <option>11</option>
    <option>19</option>
  </select>
</h1>
<div class="frame" id="elFrame"><img id="elImg"/></div>

CSS

body {
  display:flex; flex-flow:column nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

select {
  margin-bottom:0.5em;
}

.frame {
  position:relative;
  width:90vw;
  height:90vh;
}

.frame canvas, .frame img {
  object-fit:contain;
  width:100%;
  height:100%;
  display:block;
  position:absolute;top:0;left:0;
}

#elImg {
  opacity:0;
  transition:all 1s;
}

#elImg.show {
  opacity:1;
}

JS in the pen. Too much code.

doğukan · Answer 2 · 2020-06-21T11:43:18.743

You should use the image with div as background, not as img tag. Because you will have to combine it with sepia filter and dotted image.

div {
  height: 135px;
  width: 180px;
  filter: blur(0.5px) grayscale(100%) sepia(1) brightness(.8);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=),
              url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Volvo_740_GLE_%289166377791%29.jpg/180px-Volvo_740_GLE_%289166377791%29.jpg") 
              0 0 / contain no-repeat;
}

<div></div>
<p>VOLVO 740 TURBO, red, Mitsubishi turbo fitted to Volvo engine £2,300</p>

How to create halftone effect in images with pure CSS?

2 Answers2