``` css
/***********************************
⪩ ⪨
θ ω θ‿ FANCY BLUR THINGY ‿(◠ڼ◠)
- Some custom CSS to make it so all images start out blurred and slowly lose the blur over time.
- Just copy the whole thing and put it into 4chanX > Advanced > Custom CSS.
- Version 1.0.4
************************************/
/* CONFIGURATION - (You) can mess with this. */
:root {
  /* Time in seconds it takes for an image to go from max blur to min/no blur. */
  --blur-timer: 10s;
  /* Same as above, but only applies to new IPs. Requires 4chanX's "Mark New IPs" option to be turned on. */
  --blur-timer-new-ip: 10s;
  /* How much blur should the images start with */
  --max-blur: 10px; /* 10 is blurry, go above for more blur or under for less, 0 is no blur. */
  /* How little blur should the image have by the end. */
  --min-blur: 0px; /* 0 for no blur, anything above 0 to leave some blur. */   
  /* How much grayscale should the images start with */
  --max-gray-scale: 25%; /* 100 is fully gray, go below for more color, 0 is fully colored. */
  /* How little grayscale should the image have by the end. */
  --min-gray-scale: 0%; /* 0 for no grayscale, anything above 0 to leave some gray. */   
  /* Permanently blur [Deleted] images. <<IF YOU WANT TO TURN THIS OFF AND IT DOESN'T WORK SEE (*) >> */
  --blur-deleted: true; /* true / false */
}
/****************************/
/* START OF "NO TOUCH" AREA */

/* [A start] */
.postContainer.deleted-post .fileThumb:not(:hover) img {
    filter: blur(var(--max-blur)) grayscale(var(--max-gray-scale));
}

.postContainer.deleted-file .fileThumb:not(:hover) img {
    filter: blur(var(--max-blur)) grayscale(var(--max-gray-scale));
}
/* [A end] */

@container style(--blur-deleted: false) {
  /* [B start] */
  .postContainer.deleted-post .fileThumb:not(:hover) img {
      filter: blur(var(--min-blur)) grayscale(var(--min-gray-scale));
      animation-name: unBlur;
      animation-duration: var(--blur-timer);
  }

  .postContainer.deleted-file .fileThumb:not(:hover) img {
      filter: blur(var(--min-blur)) grayscale(var(--min-gray-scale));
      animation-name: unBlur;
      animation-duration: var(--blur-timer);
  }
  /* [B end] */
}

.postContainer:not(.deleted-post):not(.deleted-file):not(.new-ip):not([data-clone]) > .reply > .file > .fileThumb:not(:hover) > img {
  filter: blur(var(--min-blur)) grayscale(var(--min-gray-scale));
  animation-name: unBlur;
  animation-duration: var(--blur-timer);
}

.postContainer:not(.deleted-post):not(.deleted-file).new-ip:not([data-clone]) > .reply > .file > .fileThumb:not(:hover) > img {
  filter: blur(var(--min-blur)) grayscale(var(--min-gray-scale));
  animation-name: unBlur;
  animation-duration: var(--blur-timer-new-ip);
}

.fileThumb:hover img {
  filter: blur(0px) grayscale(0%);
  animation-name: unBlur;
  animation-duration: 0s;
}

@keyframes unBlur {
  from { filter: blur(var(--max-blur)) grayscale(var(--max-gray-scale)); }
  to   { filter: blur(var(--min-blur)) grayscale(var(--min-gray-scale)); }
}
/* END OF "NO TOUCH" AREA */
/* (*) If you want to turn off the "--blur-deleted" option but it doesn't work on your browser, then simply */
/* swap the code between [A start] and [A end] with the code between [B start] and [B end] */ 
/**************************/
```