Cutting circles in your HTML with CSS3

Masking images on the web has typically been a job reserved for Adobe Flash or some equivalent photo manipulation tool as a static image. While Flash was prevalent on the web, it became really easy to mask an image with a vector shape. Now that Flash content has been largely replaced with a combination of HTML, CSS3 and Javascript, it is time to dig back into the toolbox and find new solutions for old problems.


Masking Techniques

Making a mask for an image requires some sort of shape to use as the “mask”. This will determine what portions of your image will “show through” or be excluded. Typically a vector shape is used to make a mask. On the web, SVG (Scaleable Vector Graphics) is used to create these vector graphics. All the different ways to mask an image are outside of the scope of this article, however one technique that is illustrated in the next section does not require SVG at all. For more detailed information on the different ways to mask content with SVG check out this article

Masking with Radial Gradients

After a slight detour, it is time to get back to the task at hand. Cutting a transparent circle in a DOM element. As we have seen above, we can cut out all sorts of shapes using SVG. By layering a radial gradient over the top of a particular element we can achieve a similar effect using a circle. Check out the fiddle below for more details.

To create the illusion of a cutout circle we use the color-stops property of radial gradients. In the background-image style property the first color-stop is a 100px transparent color. This creates our “hole” in the white overlay. The next color-stop creates a 5px inner shadow of semi-transparent black. The final color-stop creates the background color for the rest of the DOM element. And volia, there is a masked hole in your DOM element with no SVG!


Leave a Reply

Your email address will not be published. Required fields are marked *