The text-transform property changes the capitalization of text visually, without altering the actual underlying text content or characters in the HTML.

Syntax

text-transform: none | uppercase | lowercase | capitalize;

Deep Dive Course

uppercase converts every letter to its capital form, lowercase converts every letter to lowercase, and capitalize capitalizes just the first letter of each word, leaving the rest of each word's original casing otherwise untouched — critically, this transformation is purely visual/presentational, applied at render time, meaning the actual text content in the HTML source, and therefore what a screen reader announces, what gets copied to the clipboard, or what JavaScript reads from the element, remains completely unchanged and unaffected by the CSS transformation.

1Understanding Text-transform

💡

Remember text-transform only changes how text visually displays — copying visually-uppercase text still copies the original, unmodified underlying text, and a screen reader typically still announces the actual underlying casing, not the CSS-transformed visual appearance.

editor.html

.button-label {
  text-transform: uppercase;
}

<button class="button-label">submit</button>

localhost:3000

2Practical Example

Here is a real-world application of Text-transform showing how it is used in production CSS code.

editor.html

.title {
  text-transform: capitalize;
}

<h2 class="title">hello world</h2>

localhost:3000

3Best Practices

Follow these guidelines when working with Text-transform:

1. Use text-transform: uppercase for stylistic, all-caps display text, like button labels or section headings, rather than manually typing the content in all caps in the HTML itself

2. Rely on text-transform specifically because it preserves the original underlying text content, keeping the actual HTML source in normal, natural casing for readability and semantic correctness

3. Avoid assuming text-transform affects anything beyond visual rendering — don't rely on it for anything that needs the actual text content itself to be a particular case, like a case-sensitive comparison in JavaScript

⚠️

Tip: Remember text-transform only changes how text visually displays — copying visually-uppercase text still copies the original, unmodified underlying text, and a screen reader typically still announces the actual underlying casing, not the CSS-transformed visual appearance.

editor.html

.button-label {
  text-transform: uppercase;
}

<button class="button-label">submit</button>

localhost:3000

Examples

Example 01Basic Usage

.button-label {
  text-transform: uppercase;
}

<button class="button-label">submit</button>

Example 02Advanced Example

.title {
  text-transform: capitalize;
}

<h2 class="title">hello world</h2>

Best Practices

Use text-transform: uppercase for stylistic, all-caps display text, like button labels or section headings, rather than manually typing the content in all caps in the HTML itself
Rely on text-transform specifically because it preserves the original underlying text content, keeping the actual HTML source in normal, natural casing for readability and semantic correctness
Avoid assuming text-transform affects anything beyond visual rendering — don't rely on it for anything that needs the actual text content itself to be a particular case, like a case-sensitive comparison in JavaScript

Interview Question

Why does copying visually-uppercase text styled with text-transform: uppercase and pasting it elsewhere paste the original, non-uppercase text instead?▼

Hint: Think about whether text-transform actually modifies the underlying text content stored in the HTML, or only changes how that unmodified content is rendered on screen.

text-transform is a purely presentational, rendering-time transformation, it changes only how the browser visually displays the existing text on screen, it never actually modifies, replaces, or rewrites the underlying text content stored in the HTML document itself. The actual text node in the DOM remains exactly as originally written, in whatever casing it was authored with, and copying text from a webpage copies that actual underlying text content, not a snapshot of however it happened to be visually rendered at that moment, which is why pasting text that appeared visually uppercase on the page produces the original, unmodified casing instead. This same underlying-content-versus-visual-presentation distinction is also exactly why a screen reader announces the actual underlying text and its natural casing, rather than reading it as visually rendered, and why any JavaScript reading that element's text content sees the original, unmodified string as well.

Exercises

MediumPractice using Text-transform in a real scenario.

View Solution

.button-label {
  text-transform: uppercase;
}

<button class="button-label">submit</button>

Frequently Asked Questions

Why does copying visually-uppercase text styled with text-transform: uppercase and pasting it elsewhere paste the original, non-uppercase text instead?▼

Related Functions

Letter-spacingFont-styleText-shadow