Scribd
Upload
123 views

CSS Shadow Effects: Output

CSS allows adding shadows to text and elements using text-shadow and box-shadow properties. Text-shadow applies shadows to text, taking values like offset, blur radius, and color. Box-shadow applies shadows to elements, also taking offset, blur, and color values, as well as ability to add multiple shadows separated by commas. Both properties provide effects like neon glow by layering multiple colored shadows.

Uploaded by

raghuraman36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
123 views

CSS Shadow Effects: Output

CSS allows adding shadows to text and elements using text-shadow and box-shadow properties. Text-shadow applies shadows to text, taking values like offset, blur radius, and color. Box-shadow applies shadows to elements, also taking offset, blur, and color values, as well as ability to add multiple shadows separated by commas. Both properties provide effects like neon glow by layering multiple colored shadows.

Uploaded by

raghuraman36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 6

CSS Shadow Effects

With CSS you can add shadow to text and to elements.


CSS Text Shadow:
This property applies shadow to text.
h1 {
text-shadow: 2px 2px;
}
<h1>Text-shadow effect!</h1>
Output:
CSS Shadow Effects
• To add a color to the shadow:
h1 {
  text-shadow: 2px 2px red;
}
Output:

• To add a blur effect to the shadow:


h1 {
  text-shadow: 2px 2px 5px red;
}
Output:
Multiple Shadows
• To add more than one shadow to the text, you can add a
comma-separated list of shadows.
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Output:

• The above example shows a red and blue neon glow shadow
• The following example shows a white text with black, blue, and
darkblue shadow:
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Output:
CSS box-shadow Property
• In its simplest use, you only specify the horizontal shadow and
the vertical shadow:
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}
<div>This is a div element with a box-shadow</div>
Output:
CSS box-shadow Property
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px grey;
}
<div>This is a div element with a box-shadow</div>
Output:
CSS box-shadow Property
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px grey;
}
<div>This is a div element with a box-shadow</div>
Output:

You might also like