Text Effects

CSS can create a variety of special text effects. A few of these include:

  • Shadows
  • Word wrapping/breaking
  • Character spacing

Example: Shadow effect

The following adds a green shadow to a blue large heading.


	h1 {
		color:			blue;
	    text-shadow: 	2px 2px green; 
	}
	

Output:

shadow1.png


Example: Shadow effect on white text

The following adds a green shadow to a blue large heading.


	h1 {
	  color: 		white;
	  text-shadow: 	1px 1px 2px Black, 0 0 20px Fuchsia, 0 0 6px Blue;
	}
	

Output:

shadow2.png


Example: Borders


	h1 {
		color: 			PowderBlue;
		text-shadow: 	-1px 0 Teal, 0 1px Teal, 1px 0 Teal, 0 -1px Teal;
	}
	

Output:

shadow3.png


Example: Character spacing with a CSS class


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>HTML Example</title>
		<style>
		.exp {
			letter-spacing: 2px;
		}
		</style>
	</head>

	<body>

		<p>The quick brown fox jumps over the lazy dog</p>
		
		<p class="exp">The quick brown fox jumps over the lazy dog</p>

	</body>
	</html>
	

Output:

spacing.png

Run it now