1

This is my sandbox page:

div.sidebar {
    background-color: blue;
    color: white;
    float: left;
    width: 180px;
    max-height: 200px;
    }
    div.content {
    width: 800px;
    float: left;
    }
    h2[titlepage] {
    color: green;
    }
    div.autophoto {
    width: 400px;
    }
    div.autophoto img {
    width: 430px;
    filter: blur(0.08em) saturate(1.1) contrast(1) brightness(1);
    }
<div class="sidebar">
    Cham
    </div>
    <div class="content">
    <h2 titlepage>Cadillac Seville... good 1980s car!</h2>
    <div class="autophoto">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/1986-1988_Cadillac_Seville_--_12-08-2009.jpg/1024px-1986-1988_Cadillac_Seville_--_12-08-2009.jpg">
    <p>This example in Maryland was in good condition</p>
    </div>
    </div>

I used this CSS for the effect:

div.autophoto img { width: 430px; filter: blur(0.08em) saturate(1.1) contrast(1) brightness(1); }

What I am aiming for is for my image to have this sort of blur:

Image originally from Pistonheads.com, used for discussion here

How could I using the filter function of CSS, emulate that effect and get the speckle effect?

I don't want to edit the image in Photoshop as the image is reused elsewhere in this test site, but do want the effect for this image and any others like this in this portion of the sandbox site.

avenas8808
  • 1,639
  • 3
  • 20
  • 33
  • 1
    Just look up "adding noise via CSS", and you'll find a lot of solutions. There are many options listed on this page too: https://stackoverflow.com/questions/4011113/can-you-add-noise-to-a-css3-gradient – Dave Apr 09 '21 at 18:55

0 Answers0