CSS text-transform Property

What You’ll Learn

The text-transform property controls how text is capitalized — uppercase, lowercase, capitalize each word, or leave it unchanged.

Introduction

The text-transform property in CSS allows you to control the capitalization of text. It can transform text to uppercase, lowercase, or capitalize each word, making it a versatile tool for text formatting in web design.

This property is useful for ensuring consistency in the appearance of text, regardless of how it is entered by users or stored in a database.

Definition and Usage

Use text-transform when you want visual capitalization without changing the HTML source — for example, making all button labels uppercase or title-casing navigation items from messy user input.

📝 Syntax

The syntax for the text-transform property is simple. It can be applied to any text element.

element {
  text-transform: value;
}

Basic Example

.uppercase {
  text-transform: uppercase;
}

Syntax Rules

• Accepts keyword values: none, capitalize, uppercase, lowercase.
• capitalize uppercases the first letter of each word, not every letter.
• full-width exists for East Asian typography but has limited browser support.
• The property is inherited; child elements follow the parent unless overridden.

Related Properties

• font-variant — controls small-caps and other typographic variants
• letter-spacing — often paired with uppercase labels for readability
• text-decoration — adds underlines or lines through text

🎯 Default Value

The default value of the text-transform property is none, which means the text is displayed as it is entered or stored.

💎 Property Values

The text-transform property accepts keyword values that control capitalization style.

When to Use text-transform

text-transform helps keep typography consistent across your site:

• Button labels — Apply uppercase for compact, bold CTAs.
• Navigation menus — Use capitalize for readable menu items.
• User content — Normalize inconsistent casing from forms or databases.
• Metadata tags — Style category labels with lowercase for a subtle look.

Examples Gallery

In this example, we’ll apply different text transformations to paragraphs.

<style>
  .none { text-transform: none; }
  .capitalize { text-transform: capitalize; }
  .uppercase { text-transform: uppercase; }
  .lowercase { text-transform: lowercase; }
</style>

<p class="none">This text is not transformed.</p>
<p class="capitalize">this text is capitalized.</p>
<p class="uppercase">this text is uppercase.</p>
<p class="lowercase">THIS TEXT IS LOWERCASE.</p>

.btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  font-weight: 600;
}

.nav-link {
  text-transform: capitalize;
  color: #334155;
  text-decoration: none;
}

.tag {
  text-transform: lowercase;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #e2e8f0;
}

♿ Accessibility

• Screen readers — May announce text using the original HTML casing, not the transformed visual form.
• Avoid ALL CAPS for long text — Uppercase blocks of text are harder to read for many users.
• Do not rely on casing alone — Use semantic HTML and labels; transformation is decorative.
• Prefer proper source text — For important content, write correct casing in HTML when possible.

capitalize vs uppercase

capitalize only uppercases the first letter of each word. uppercase converts every character. Choose based on whether you need title case or full caps.

/* "hello world" → "Hello World" */
.title { text-transform: capitalize; }

/* "hello world" → "HELLO WORLD" */
.label { text-transform: uppercase; }

💡 Best Practices