Creating the visual effect of silkscreening - forming an image out of tiny dots of color - is easy to achieve in a web page with . The technique shown here uses multiple backgrounds in a div element: one repeating grid pattern that is closely related to the effect used in my Pop-Art article, just at a smaller cell size, combined with a bitmap image. I’ve also added a transitioned greyscale filter to desaturate the colors.

The Markup & CSS

The containing <div> is empty…

<div id="silkscreen"></div>

…but will be propped open by using padding-bottom, in a method similar to that used to make YouTube videos responsive:

Multiple background images are set in the <div> to layer and repeat, while applying filter effects:

div#silkscreen {
	background: url(silkscreen.svg), url(lotus.jpg);
	padding-bottom: 64%;
	background-size:4px 4px, 100%;
	background-repeat: repeat, no-repeat;
	filter: grayscale(1);
	transition: 1.3s;
div#silkscreen:hover { 
	filter: none; 

SVG Checkerboard

Creating an SVG checkboard for the silkscreen effect is a matter of using just two square elements in a diagonal arrangement:

<svg xmlns="" width="50" height="50">
    <g fill="rgba(0,0,0,0.5)">
        <rect width="25" height="25" />
        <rect x="25" y="25" width="25" height="25" />

This creates a pattern like so:

By shrinking the checkerboard with background-size, we can create a very fine-grained silkscreen effect over any image cheaply and easily.

Photograph by P Lam Khun, licensed under Creative Commons.