Home » CSS

CSS Shadow Effects

Shadow Effects in CSS: Here, we are going to learn about the shadow effects in CSS like text shadow effects, box shadow effects, etc.
Submitted by Anjali Singh, on December 17, 2019

Shadow Effects in CSS

It is always good to make our web pages stylish and beautiful, web pages that would catch users eyes instantly but one gets confused as to how to style his or her web page. The confusion is quite legit too as there is an abundance of styling techniques that one can apply on their web page. Therefore, this section is about one such styling method, that is shadows in CSS.

Using CSS shadow property you can create shadows for text and boxes. Now that we are aware of what this property is, let us discuss some of its properties as well.

The text-shadow Property

The very first and quite easy property is text-shadow property. As the name suggests, using text-shadow property you can apply shadows to the text. Making your text smoky and stylish. The values of this property are mentioned below

text-shadow property can take up to four values to further make the implication easy,

  • Horizontal shadow
  • Vertical shadow
  • Blur effect
  • Color

Syntax:

Element {
    text-shadow: 3px 2px 2px #000000;
}

Normal Text Shadow

The Normal Text Shadow effect helps you add shadow to your text in a very basic method with not that much coding and easy implementing. This could be better understand with the help of an example.

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            color: #f40;
            text-shadow: 3px 4px 4px #0011f3;
        }
    </style>
</head>

<body>
    <h1>Text-shadow effect!</h1>
</body>

</html>

Output

CSS | Text Shadow Property | Example 1

As you can see, in the above example, the normal text-shadow effect is applied and voila!

Glowing Text Effect Shadow

It would be great if we could make our text glow as well. So, why wait and let us move forward with the Glowing text effect shadow property, this property is specifically for making the text to glow.

An example can surely help you understand better.

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        h1 {
            color: #f40;
            text-shadow: 0 0 4px #00FF9C;
        }
    </style>
</head>

<body>
    <h1>Text-shadow effect!</h1>
</body>

</html>

Output

CSS | Text Shadow Property | Example 2

So, you can see, in the above example, the glowing effect text-shadow is applied.

Box Shadow Property

Next, what if someone wants to apply this property to elements is the HTML? Well, Box Shadow Property has got you covered. This property is used to apply the shadow to elements in CSS. Even further the Box Shadow Property has its own set of values.

Values:

The box-shadow property can take one to six values,

  • inset keyword (it changes the shadow to one inside of the frame)
  • horizontal shadow
  • vertical shadow
  • blur effect
  • spreading
  • color

Syntax:

Element {
    box-shadow: 10px 10px;
}

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            border: 1px solid;
            padding: 30px;
            box-shadow: 5px 10px 8px 10px #006969;
        }
    </style>
</head>

<body>
    <div>
        <p>Box shadow effect.</p>
    </div>
</body>

</html>

Output

CSS | Text Shadow Property | Example 3

Therefore the above example shows the implementation of box-shadow property which has been applied to the div element.






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.





Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.