No Login Data Private Local Save

Text Transform Functions Playground - Online Preview CSS

23
0
0
0

Text Transform Functions Playground

Experiment with CSS text-transform values in real time. Preview uppercase, lowercase, capitalize, full-width, and full-size-kana transformations. Copy the clean CSS code for your projects.

Controls
Live Preview

The quick brown fox jumps over the lazy dog. 123!

Generated CSS
.preview-text {
  text-transform: none;
  font-size: 24px;
  color: #333333;
}

Frequently Asked Questions

The text-transform CSS property controls the capitalization of text. It can make text appear in all uppercase or lowercase, capitalize each word, or apply special transformations like full-width characters. It only affects the visual presentation — the underlying text in the DOM remains unchanged.

Uppercase transforms all characters to their capital form. Capitalize only makes the first character of each word uppercase. Note that browser interpretation of “word” can vary with punctuation or numbers, so capitalize may behave inconsistently across languages.

full-width converts characters to their wider, CJK-compatible forms — for example “ABC” becomes “ＡＢＣ”. It is mainly used in East Asian typography to align Latin letters and digits with the uniform width of CJK characters.

full-size-kana scales small Japanese kana (like っ) to their full-size equivalents (つ). It is used in ruby annotations and certain print layouts. While supported in modern versions of Chrome, Edge, and Firefox, older or niche browsers may not implement it — always test.

No. text-transform is purely cosmetic. The underlying HTML text remains unchanged. When you copy text from the page, screen readers access the original text, and JavaScript reading the DOM content will still see the original casing.

Click the Copy button next to the “Generated CSS” panel. The full CSS rule, including your selected text-transform, font-size, and color will be copied to your clipboard, ready to paste into your stylesheet.
🔧 Related Tools