Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > CSS Tutorials > Cool CSS Text Effects   

Cool CSS Text Effects

In this tutorial we will learn how to use CSS Styles to give stylish effects to text. Learn how to create shadow effects, inset effects, neon style effects, glossy styles, grunge style effects and more!

cool css text effects

Please Note : some of the effects can be seen only in Fireworks and Google Chrome.

Text effects using CSS shadows

First we'll create text effects using the CSS Shadow Property and then we'll create text effects using the CSS Background Image Property.
The HTML code will be same for all the examples below. Only the CSS code will change.

The HTML code

Just put your text inside any div or span and give it an id=style. For the example below, we are working with the text "CSS Text Effects".

1
2
3
4
5
   <div id=style>

        CSS Text Effects

    </div> 

Apply shadow to the text inside the <div> with the id style.

The Syntax

text-shadow:(x-offset) (y-offset) (blur-radius) (color)

X-Offset:
Y-Offset:
Blur-radius:
Color:
To position the shadow along the x-axis.
To position the shadow along the y-axis.
To set the amount of blur.
To set the color of the shadow.

Here are some examples of the text effects using CSS.

The Colorful Style

Three colored shadows are used here. So we'll have to define three shadow values, each separated by a comma.

CSS Text Effects

1
2
3
4
5
#style{
text-shadow: 0 6px 4px #85c226,
		     -3px -5px 4px #fe2192,
		     3px -5px 4px #f7c200;
} 

The Double Font Style

A single shadow is used here. The Pink(#fe2192) colored shadow has a y-offset value set at -15 pixel.

CSS Text Effects

1
2
3
4
5
#style{
text-shadow:0px -15px 0 #fe2192;
} 

The Neon Glow Style

A single Blue(#1E90FF) colored shadow is used here with a Blur Radius of 7 pixel.
The text color is also the same Blue(#1E90FF) color.

CSS Text Effects

1
2
3
4
5
#style{
text-shadow: 0 0 7px #1E90FF;
background:#000000;
color: #1E90FF;
} 

The Inset Effect

Two shadows are used here, each of them moved 1 pixel along the x-y axis in opposite directions.
The Background and the Text have the same Grey(#CCCCCC) Color.



The Dark Grey(#666666) colored shadow is moved to the top left corner.
The White(#FFFFFF) colored shadow is moved to the bottom right corner, to give it an inset look.

CSS Text Effects

1
2
3
4
5
6
7
#style{
background: #CCCCCC;
color: #CCCCCC;
text-shadow: -1px -1px 3px #666666,
                       1px 1px 3px #FFFFFF;

} 

The Outset Style

We'll do the exact opposite of what we did for the Inset Effect.



The Dark Grey(#666666) colored shadow is moved to the bottom right corner.
The White(#FFFFFF) colored shadow is moved to top left corner, to give it an inset look.

CSS Text Effects

1
2
3
4
5
#style{
background: #CCCCCC;
color: #CCCCCC;
text-shadow: 1px 1px 3px #666666,
                       -1px -1px 3px #FFFFFF;
} 


Text Effects Using CSS Backgrounds

Here we'll use transparent images to create the Text Effects.
We just need to insert an empty <span></span> tag inside the <div> with id style.
The transparent images will be used as the background for these span tags.
Then we'll position the <span> element over the text using z-index property to give it a different look.

The HTML Code

Lets have look at the HTML code.
The text and the empty <span> is inside the <div> with id style.

1
2
3
4
5
   <div id=style>

        CSS Text Effects<span></span>

    </div> 

The Grunge Style

We will have to define two separate styles for the style div element and for the span element inside the div element.

The style div element has a css position property set to relative so that the span element can be positioned related to the style div element.

This is the image used for the grunge effect.

CSS Text Effects

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#style{
	position:relative;
	font-weight: bold;
	color:red;
	background: #000;
}
#style span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index: 21;
    background:url('images/grunge.png');
} 

The Glossy Style

The code is the same as above, only the image is different.

This is the image used for the gloss effect.

CSS Text Effects

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#style{
	position: relative;
	font-weight: bold;
	color:orange;
}
#style span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index: 21;
    background:url('images/glossy.png');
} 

Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Responsive Website Design? Choose from over 2000 templates!

Free HTML5 Website

Featured Template
Template # 54928
Type: Photo Gallery 3.0
Price: $139