Text

text-transform

text-transform changes the case of letters, or half-width to full-width, purely in how the text is displayed.

Syntaxnone …

none
  | [ capitalize | uppercase | lowercase ]
    || full-width || full-size-kana
  | math-auto

Preview

Presets

Drag the bottom-right corner to resize

Code

.box {
  text-transform: uppercase;
}

Controls

text-transformuppercase

nonecapitalizeuppercaselowercase

full-width / full-size-kana

full-width

full-size-kana

About

Only the display changes

The characters in the HTML stay the same, so find-in-page and submitted form values use the original text. Writing headings normally in HTML and making them uppercase in CSS is the usual approach.

The values

uppercase makes every letter uppercase and lowercase every letter lowercase.
capitalize uppercases the first letter of each word and leaves the rest alone. The preview’s “Aa” already starts with a capital, so it doesn’t change.
full-width turns half-width letters, digits and symbols into their full-width forms, handy for upright Latin text in vertical writing.
full-size-kana turns small kana such as ぁ, ャ and ッ into full-size ones, to keep tiny ruby text readable.

full-width and full-size-kana work in Firefox and Safari, but Chrome and Edge ignore them, so the text looks unchanged there.

Results depend on the language

Case mapping follows the element’s language (the lang attribute). In Turkish, for example, i becomes the dotted İ.

References

MDN Web Docstext-transform SpecificationCSS Text Module Level 4 Can I usetext-transform