CSS Shadow Effects
With CSS you can create shadow effects!
Hover over me!
CSS Shadow Effects
You can use CSS to make text and elements look like they have shadows.
In these sections, you will find details about the following attributes:
.
CSS Text Shadow
The HTML property known as text-shadow creates a shadow effect for text.
In its simplest form, you only need to specify the width (2px) for the shadow's horizontal part and the height (2px) for the shadow's vertical part within the HTML tags.
Text shadow effect!
Next, give the shadow a color:
Text shadow effect!
Next, apply a fuzzy appearance to the shadow by adding a blur effect.
Text shadow effect!
In this example, you'll notice text that's colored white and has a dark black shadow.
Text shadow effect!
This sample demonstrates a glowing red shadow that resembles neon lighting.
Text shadow effect!
Multiple Shadows
You can create several shadows for text by separating them using commas.
Here's an example that shows a shadow that looks like neon lighting in two colors: red and blue.
Text shadow effect!
In this example, you'll see white text with shadows in black, blue, and dark blue. The shadows add different colors to the text.
Text shadow effect!
You can employ the text-shadow property to create a basic text border without adding any shadows.
Border around text!
CSS box-shadow Property
The CSS property called box-shadow is utilized to add shadows to an element. This can include one or more shadows as desired.
Specify a Horizontal and a Vertical Shadow
For basic use, just mention a horizontal and a vertical shadow. The default shadow color is the same as the current text color.
A <div> element with a box-shadow
Specify a Color for the Shadow
The color attribute specifies the shadow's color.
<div> element with a lightblue box-shadow
Add a Blur Effect to the Shadow
The blur setting determines how blurry the shadow is. A larger value results in a more blurred shadow.
<div> element with a 5px blurred, lightblue box-shadow
Set the Spread Radius of the Shadow
The spread attribute sets the spread radius. A positive value makes the shadow larger, while a negative value makes it smaller.
A <div> element with a hazy, light blue box-shadow, extending 12 pixels.
Set the inset Parameter
The inset parameter modifies the shadow from an outer shadow (outset) to an inner shadow.
A <div> box with a shadow that is blurred, light blue, and appears inset.
Add Multiple Shadows
An object can also have various shadows:
Cards
You can use the box-shadow property to make cards that look like paper.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow with red neon glow!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>Text-shadow with red and blue neon glow!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>
<h1>Border around text!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a lightblue box-shadow</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a 5px blurred, lightblue box-shadow.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
margin: 20px;
}
#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
margin: 20px;
}
</style>
</head>
<body>
<h1>Multiple Shadows</h1>
<div id="example1">
<h2>Multiple shadows</h2>
<p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>
<div id="example2">
<h2>Multiple shadows with blur effect</h2>
<p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h1>Create Polaroid Images</h1>
<p>The box-shadow property can be used to create polaroid images:</p>
<div class="polaroid">
<img src="/assets/files/mushroom.jpg" alt="Mushroom" style="width:100%">
<div class="container">
<p>Hardanger Mashroom</p>
</div>
</div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL