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 radial gradient that is closely related to the polka-dot effect in my Pop-Art CSS3 Effects Article, just at a smaller cell size, combined with a greyscale filter to desaturate the colors in the image.

I’ve also placed a full-size version of the same image (supplied by P Lam Khun) in the background of the <div>, set to a width of 100% to create a fluid, . I’ve also added a transition effect.

The Markup

The markup includes an inline SVG filter for Firefox. The <div> is empty, but will be propped open by using padding-bottom, in a method similar to that used to make YouTube videos responsive:

<div id="silkscreen"></div>
<svg version="1.1" xmlns="">    
	<filter id="greyscale">
		<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
		0.3333 0.3333 0.3333 0 0
		0.3333 0.3333 0.3333 0 0
		0      0      0      1 0" />


The stylesheet sets multiple background images in the <div> to layer and repeat, while applying filter effects:

div#silkscreen {
	background: radial-gradient(rgba(0,0,0,0) 45%,
	 rgba(0,0,0,0.4) 46%),
	 radial-gradient(rgba(0,0,0,0) 45%,
	 rgba(0,0,0,0.4) 46%),
	padding-bottom: 60%;
	max-width: 800px;
	width: 80%;
	margin: 0 auto;
	background-position: 0 0, 2px 2px;
	background-size: 4px 4px, 4px 4px, 100% 100%;
	background-repeat: repeat, repeat, no-repeat;
	-webkit-filter: grayscale(1);
	filter: url(#greyscale);
	filter: grayscale(1);
	transition: 1.3s
div#silkscreen:hover { 
	-webkit-filter: grayscale(0);
	filter: none; 

For more details on the filter, read my article on converting an image to black and white.