How to add Shadow Effect on Text Using CSS. Cascading style sheets are applied for styling an HTML page. This adds all the elements that an HTML page can probably contain. Text styling is a pretty remarkable feature inside CSS. It is very significant that there are unity and synchrony in the styling of the text content on a page with different elements like images, links, buttons, etc. With the use of CSS, we can ensure that the text on the page is in sync. CSS allows many text innovations like text color, letter spacing, text size, line height, text direction. One such property is Text-shadow. By using this feature, we can pitch the text with a shadow, to highlight the text. This will give excellent planning of the text that we want to be highlighted. This article will present in detail about these particular features. In this topic, we are going to learn about Text-Shadow Effect using CSS.
Read Also: Introduction to CSS Controls.
Text-Shadow syntax and how it works in CSS?
Text-shadow can be utilized in inline CSS, internal CSS, or External CSS. The syntax for text-shadow is:
How to add Shadow Effect on Text Using CSS
text-shadow: horizontal-shadow vertical-shadow blur-radius color/none/ inherit/initial;
| Here, 5px 5px 5px horizontal-shadow, vertical-shadow, blur-radius are compulsory parameters, while color is an optional parameter.
- None, beginning, and inherit are global values where none defines that there is no text-shadow, inherit tells the element to take the parameters set for the parent element and beginning will make sure that the property is returned back to its default value.
- Horizontal and vertical shadows are statistical parameters that determine the range of the shadow from the text.
- Horizontal shadow defines the horizontal range of the shadow from the text, i.e. left or right control. If the value is positive, the shadow will be in the right direction, if negative, the shadow will be in the left direction.
- Vertical Shadow defines the vertical range, i.e. above or below. If the value is positive, the shadow will be below the text, while if it is negative, the shadow will be placed above the text.
- Blur-radius is also a statistical parameter, which must be defined, or else, its default value is taken as 0. This parameter determines, how blurry (light or wide) necessity the shadow be. The greater the value, the broader the shadow.
- As the name goes, color is the point that decides the color of the shadow. This is an optional parameter.
Read Also: What is CSS?
| Examples of CSS for Text-Shadow
Let’s define the feature through examples for better understanding:
| Basic Text-shadow Using Inline CSS
- Build an html page. Include the basic tags required to build the page, such as, <html />, <head /> and <body>.
- Inside, the body tag, describes any textual element, and utilizing inline styling, explains its text-shadow parameters. For this example, we have styled <h1> as follows:
<h1 style="text-shadow: 1px 2px 4px hotpink;">Text Shadow</h1>
| Creating Multiple Shadows
- There can be deeper than one shadow for a special text. We just require to combine an extra set of the parameter in the same definition, separated by a comma, like this:
Read Also: Styling CSS Tables.
<h1>Text-shadow Property</h1>
<style type="text/css">
h1{
text-align: center;
text-shadow: 4px 2px 4px hotpink, -4px -2px 4px red;
font-size: 20px;
background-color: #ddd;
border: 3px solid #eee;
margin: 100px;
}
</style>So, we explained the effectiveness of the text-shadow property proposed by CSS for styling texts in our HTML pages. There are many other methods, that one can try with text-shadow. It will be of outstanding use for highlighting some essential text.
Have a Good Day.