JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

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*/
}