---
title: "Text Transform and Text Shadow Property using CSS3"  
description: "In this blog I have tried to explain how to use Text Transform and Text Shadow using CSS3 and HTML.  The Text Transform property is use for transform"  
author: "Vijay Shukla"  
published: 2012-12-27  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/411/text-transform-and-text-shadow-property-using-css3  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# Text Transform and Text Shadow Property using CSS3

In this [blog](https://www.mindstick.com/articles/12705/myths-and-misconception-about-blog) I have tried to [explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems) how to use Text [Transform](https://www.mindstick.com/interview/511/what-are-the-steps-to-transform-xml-into-html-using-xsl) and [Text Shadow](https://www.mindstick.com/forum/34081/text-shadow-in-css) using [CSS3](https://www.mindstick.com/articles/1534/stylish-css3-progress-bars) and [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript).\

The Text Transform [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) is use for transform the text it have several [values](https://www.mindstick.com/forum/327/sum-textbox-values) these are given below:

##### Uppercase:

This [value](https://www.mindstick.com/articles/23219/an-optimized-description-adds-value-to-experience-and-in-turn-effectively-guest-posting-packages) is Transform the text in any case to Uppercase.

##### Lowercase:

This value is Transform the text in any case to Lowercase.

##### Capitalize:

This value is transform the word in capitalize means every word start with capital letter in any paragraph.

```
<!DOCTYPE html><html><head><style>p.uppercase {text-transform:uppercase; text-shadow:5px 5px #CD853F; font-weight:bold;}
p.lowercase {text-transform:lowercase; text-shadow:5px 5px #CD853F; font-weight:bold;}
p.capitalize {text-transform:capitalize; text-shadow:5px 5px#CD853F; font-weight:bold;}
</style></head><body><p class="uppercase">mindstick</p><p class="lowercase">mindstick</p><p class="capitalize"> mindstick unleash your imagination </p></body></html>
```

##### Below is Output:

### \

![Text Transform and Text Shadow Property using CSS3](https://www.mindstick.com/blogs/0db41155-ad9c-4089-8ab2-c23fd7f89632/images/2be07bdb-5319-4c7f-aec8-c749c76fdde3.png)

---

Original Source: https://www.mindstick.com/blog/411/text-transform-and-text-shadow-property-using-css3

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
