Woman wearing an ornate butterly-shaped mask, staring at the camera

While there are many ways to mask content with CSS, until very recently, there weren’t any standardized, reliable methods of wrapping content around images. Lately, that has completely changed: new techniques and CSS modules have pushed web page layouts to the cusp of a revolution in design.

This reading list - constantly edited and growing - attempts to cover all of the applicable methods with useful, practical examples.

Time: 2 hours

Prerequisites: HTML and basic CSS

  1. Images with rounded corners
  2. Image Vignettes
  3. Radial Vignettes
  4. Wrapping Text around a Circular Shape
  5. Wrapping Text around a Curved Shape
  6. Combining clip-path and Shapes
  7. Text Masks with Blend Modes


Read up on general approaches on how to create non-rectangular web designs.

Photograph by Andreas Voigt, used under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.