Text Shadow — Code Challenge

How it works

• Text shadow takes horizontal offset, vertical offset, optional blur, and colour. Small shadows can create depth without changing layout.
• Typography should remain readable when the browser zooms or a visitor substitutes their own font. Start with comfortable line length and line height.
• Inspect the specific property in the example, then compare the heading, body text, and badge. They may inherit different values.

Your task

Use the HTML below to explore this rule: Text shadow takes horizontal offset, vertical offset, optional blur, and colour. Small shadows can create depth without changing layout. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.

h2 { color: #24563d; text-shadow: 1px 2px 0 #d4e9c5; }

A solution to compare

The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.

<article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article>

body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }

/* This lesson */
h2 { color: #24563d; text-shadow: 1px 2px 0 #d4e9c5; }

Text shadow takes horizontal offset, vertical offset, optional blur, and colour. Small shadows can create depth without changing layout.