How to add shadow to text in CSS
In this tutorial, we are going to see how to add shadow to text in CSS. You can use the CSS text-shadow property to apply the shading effect (like the shading style in Photoshop). You can also apply more than one shadow by providing a list of values separated by commas.
Example 1 :
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px blue; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet.</h1> </body> </html>
Result |
---|
Lorem ipsum dolor sit amet. |
Example 2 :
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 2px 2px 8px blue; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet.</h1> </body> </html>
Result |
---|
Lorem ipsum dolor sit amet. |
Example 3 :
<!DOCTYPE html> <html> <head> <style> h1 { color: white; text-shadow: 2px 2px 4px #000000; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet.</h1> </body> </html>
Result |
---|
Lorem ipsum dolor sit amet. |
Example 4 :
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 0 0 3px blue, 0 0 5px green; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet.</h1> </body> </html>
Result |
---|
Lorem ipsum dolor sit amet. |