Creating text-shadows and other text effects using CSS

3 min


Text-Shadows

Text-shadows: The text-shadow property is not new to CSS-3, it was introduced back in CSS-2, but browsers only started to take it into account recently.

As the name implies, the text-shadow property allows you to create a shadow for text using CSS. Below is the text-shadow syntax.

Syntax

Syntax

The first value determines the offset of the shadow along the X-axis, i.e., horizontally. If the value is positive, it determines the offset of the shadow to the right of the text, with a negative value, the offset of the shadow to the left of the text. Similarly, the second positive value determines the offset along the Y-axis (vertical), a positive value determines the offset below the text, the negative creates a distance above the text.

The third positive value determines the blur radius of the shadow. If no value is specified, there will be no blur.

Creating text effects with the text-shadow property.

With the text-shadow property, you can make some text effects that you previously could only do with a photoshop or other graphics editor. To get a general idea of how text-shadow can be used, we’ll look at some examples below.

1. A simple shadow for text on CSS

This is a simple example of using the text-shadow property. It creates a 2px shadow along the X-axis and Y-axis, as well as a blur radius of 2px.

color:#7690CF;
text-shadow:2px 2px 2px #48577D;

A Simple Shadow For Text On Css

2. Style engraved text

In this case, only the vertical offset is indicated, without blurring.

color: #666;
text-shadow: 0px 3px 0px #666;

Style Engraved Text

3. Glowing text effect

The glowing effect can be made by adding only the blur radius.

color:#FAF4E8;
text-shadow:0 0 20px #FFE30A;

Glowing Text Effect

4. Blurred text

In the example below, everything is done similarly to the previous one, i.e., only the blur radius is specified without horizontal or vertical offset. However, in this example, a transparent color value was used, which indicates that the background color should be transparent. This gives a blur effect.

color: transparent;
text-shadow: 0 0 10px #333;

Blurred Text

5. Use multiple shadows

You can specify multiple shadows for the text, separated by commas. An example of using multiple shadows:

color:#F2B405;
text-shadow: 0 0 4px #F24405,
0 -5px 4px #F27405,
2px -10px 6px #F29F05,
-2px -15px 11px #F2E205,
2px -18px 18px #222601;

Use Multiple Shadows

6. Embossed text

In the example below, two shadows are used. In the first shadow, the horizontal and vertical values are negative, and in the second shadow, positive values are used, which gives relief to the text.

color:#ccc;
text-shadow: -1px -1px #FFF,
1px 1px #333;

Embossed Text

7. The border around the text

The following code creates a border effect for text.

color:#7FCAEB;
text-shadow: 0 -1px #00468C,
1px 0 #00468C,
0 1px #00468C,
-1px 0 #00468C;

Border Around The Text

8. Text in 3D style

A 3D text effect can be created using multiple shadows. To achieve the effect, each shadow is slightly enlarged using the same color.

color:#F2B405;
text-shadow: 2px 2px #F27405,
3px 3px #F27405,
4px 4px #F27405,
5px 5px #F27405

Text In 3D Style


Like it? Share with your friends!

What's Your Reaction?

cute cute
180
cute
lol lol
300
lol
love love
270
love
scary scary
180
scary
hate hate
30
hate
geeky geeky
60
geeky
omg omg
210
omg
CmsDaddy

Hello Guys, Here we write about ultimate guides about content management system (CMS) and other software such as WordPress, Joomla, Drupal, Oxwall, Skadate, Prestashop, Magento, CSS, HTML, Linux, CentOS, Ubuntu, Windows, macOS, Android, iOS, iPadOS, etc...

0 Comments

Your email address will not be published. Required fields are marked *

Choose A Format
Story
Formatted Text with Embeds and Visuals
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Ranked List
Upvote or downvote to decide the best list item
Open List
Submit your own item and vote up for the best submission
Countdown
The Classic Internet Countdowns
Video
Youtube and Vimeo Embeds