CSS text-transform Property


The text-transform CSS property is used to control the capitalization and transformation of text within an HTML element. It allows web developers to specify how text should appear in terms of uppercase, lowercase, or capitalized words. The property can take several values, including uppercase to make all text in the element appear in uppercase letters, lowercase to render text in all lowercase letters, and capitalize to capitalize the first letter of each word. This property is particularly useful for ensuring consistent text formatting across a website and can enhance readability and design consistency.

Initial value
Applies to
All elements
Computed value
As specified
JavaScript syntax

Interactive Demo

The RUSTY swing set creaked a lonely LuLLaby in the twilight, shadows lengthening Like grasping fiNGErs across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.


text-transform: none | capitalize | uppercase | lowercase | full-width


  • noneWill not change any text
  • capitalizeWill make the first letter of each word a capital letter
  • uppercaseWill transform all letters to uppercase
  • lowercaseWill transform all letters to lowercase
  • inherit


<p class="test">The quick brown fox jumps over the lazy dog.</p> 
<p class="test2">The quick brown fox jumps over the lazy dog.</p>
<p class="test3">The quick brown fox jumps over the lazy dog.</p>
.test {
   text-transform: capitalize; 
.test2 {
   text-transform: uppercase;
.test3 {
   text-transform: lowercase;

Browser Support

The following table will show you the current browser support for the CSS text-transform property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024