Useful Stuff About:

Text Gradients

This is an example of how to create gradients for text with CSS (rather than in Photoshop). This example is NOT a photo. The gradient will change along with changing the font size. You can't really see the effect unless you are in Live mode in DW or viewing the page in a real browser.

This text has gradients for color.

Here's the HTML Code


  
  <div id="gradientText">
       <h1>This text has gradient for color.</h1>
  </div>

Here's the CSS Code - this needs to be adjusted a lot for what YOU want


  
#gradientText {
  background: #222;
}
#gradientText h1 {
  	margin: 0 auto;
  	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  	font-weight: 400;
  	font-size: 3em;
	display:table;
  	background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
	/*
	330deg rotates the linear gradients to any chosen angle
	#e05252 0% sets on gradient color #e05252 stop at 0% from the left edge of the text
	#99e052 25% sets on gradient color #99e052 stop at 25% from the left edge of the text
	#52e0e0 50% sets on gradient color #52e0e0 stop at 50% from the left edge of the text
	#9952e0 75% sets on gradient color #9952e0 stop at 75% from the left edge of the text
	#e05252 100% sets on gradient color #e05252 stop at 100% from the left edge of the text
	*/
  	-webkit-background-clip: text;/*This line makes the text a mask to reveal the background gradient*/
  	-webkit-text-fill-color: transparent;/*This line makes the text fill color transparent revealing the background gradient*/
	line-height:160px;/*This VERTICALLY aligns the text to middle*/
}