Letters with CSS

What I set out to do

In 2021, before AI tools, I wanted to really understand CSS rather than copy snippets I didn't fully follow. So I set myself a challenge: draw every capital letter of the English alphabet using nothing but CSS.

What I built

Twenty-six letters, A to Z, each made from plain page elements and styling alone, with no images, SVG, or fonts.

• Pseudo-elements (::before and ::after) add extra shapes to a single element.
• Borders and box-shadow draw strokes, curves, and repeated parts.
• Positioning and transforms place each piece and angle the diagonals.

Every letter started as a puzzle: what's the fewest number of shapes that still reads as this letter?

Where it is now

Complete. All 26 capital letters are drawn, and each one's HTML and CSS can be viewed and copied on the live site, shown below.