Gradient Text


Gradient Text Using Only CSS in Dreamweaver

    ●   In the old days you would have to you would have to make an image in Photoshop to produce gradient text.

    ●   Now we can use this technique to create the effect without any images - only code.

•   This tutorial is part of the Art Genre , What in the World?, and Home Sweet Home Portfolio Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.

Joe Student

Step #1: Open Your index Page in Dreamweaver ~

This tutorial follows: 74_CSS_text-size_Dw.htm

Open your CSS styles panel …

… and double-click your styles.css file to open it.


Step #2: Scroll Down ~

Scroll down to the bottom of your CSS code and click there …

Step #3: Insert the CSS ~

Copy and paste this code …

.gradient-text { 
      font-size: 45px; 
      text-transform: uppercase; 
      background: -webkit-linear-gradient(yellow, red); 
      -webkit-background-clip: text; 
      -webkit-text-fill-color: transparent; 

Your code should end up looking something like this:

Step #4: Insert the id ~

Find some big bold text in your work that would look good with a gradient and highlight it …

gradient text select

… click the Class button in the Properties menu …

properties class tag

… and attach the tag to it.

Step #5: Hex Code Colors ~

Go to: and pick a color …

OR - if you chose your colors in the Kuler Colors tutorial in Illustrator, opne it and find the Swatches panel …

… click a color in Swatches, and then Double-Click the Fill color to see the Hex Code.

Step #6: Change your Top Color ~

Copy the Hex code numbers hex code and replace the gradient colors to match your theme …

… for something like this:

gradients without images

Step #7: Stroke ~

Copy and paste this code …

-webkit-text-stroke: 1px black;    

… and add it to the bottom of your CSS.

Last Step: Upload your Site ~

Save and upload your files with the completed code.

Attach the URL of your site, and continue working…

Other Resources: