CSS text-transform Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

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: none
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.textTransform

Interactive Demo

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

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.

Syntax

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

Values

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

Example

HTML

<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>

CSS

.test {
   text-transform: capitalize; 
}
.test2 {
   text-transform: uppercase;
}
.test3 {
   text-transform: lowercase;
}

Result

Editor

Browser Support

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

Desktop

12	1	1	7	1

Tablets / Mobile

18	4	11	1	1	4.4

Last updated by CSSPortal on: 2nd January 2024

Support Us