Box shadow and text shadow in css

Shadow Effects in CSS

There are several ways of making shadows with CSS. In this snippet, we will discuss text and box shadows full of details and different types of implementing shadow effects.

Text shadow

To add a shadow to your text, you need to use the CSS text-shadow property. This property is an easy way to work with and create different effects on texts. With the text-shadow property you need four variables to define; the first two are used to set shadow’s position (the horizontal shadow and the vertical shadow), the third value is used to specify the amount of blur and the fourth one defines the color of the shadow.

Syntax

text-shadow: horizontal vertical blur color;

Example of adding a text shadow:

html> html> head> title>Title of the document title> style> div < display: flex; justify-content: center; align-items: center; width: 500px; height: 200px; margin: 0 auto; padding: 10px; background: #262626; font-size: 100px; font-family: Arial, Helvetica, sans-serif; > p < color: #1a1a1a; text-shadow: 1px 2px 3px #666666; > style> head> body> div> p>strong>W3DOCS strong> p> div> body> html>

Result

Double shadow

Text shadows give you also a fantastic opportunity to create double shadows. By using a comma, you can separate the declarations, it is possible to provide as many shadows as you want!

Example of adding a double shadow:

html> html> head> title>Title of the document title> style> div < display: flex; justify-content: center; align-items: center; height: 200px; width: 500px; margin: 0 auto; padding: 10px; background: #fff; font-size: 100px; font-family: Arial, Helvetica, sans-serif; > p < color: #333333; text-shadow: 4px 3px 0px #fff, 9px 8px 0px #ccc; > style> head> body> div> p> strong>W3DOCS strong> p> div> body> html>

Border around text

You can also use the text-shadow property to create a border around your text. Here you will need to use multiple shadows and negative pixels to keep the balance.

Example of adding a border around the text:

html> html> head> title>Title of the document title> style> h1 < color: #8ebf42; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; > style> head> body> h1>Border around Text h1> body> html>

Box Shadows

You can have shadow effects for your boxes with the help of the box-shadow property. You can also use box shadows while using Forms.

With the box-shadow property you need five variables to define: the horizontal offset (required), a positive value will put the shadow on the right side of the box, and a negative offset will put the shadow on the left side of the box; the vertical offset (required) of the shadow, a negative value means that the box-shadow will be above the box, a positive value means that the shadow will be below the box; the blur radius (required), if this value is set to 0 the shadow will be sharp, a higher number will make more blur; the spread radius (optional), a positive value increases the size, and a negative value decreases the size of the shadow (default is 0, it means that the shadow is the same size as the blur; and the color (required), is used to define the color of the shadow (learn about HTML colors). If the color value is missing, the box-shadow will take the text color.

Example of adding a box-shadow:

html> html> head> title>Title of the document title> style> html, body < height: 100%; padding: 0; margin: 0; > body < display: flex; align-items: center; justify-content: center; > div < padding: 10px; border: 0.5px solid #1c87c9; border-radius: 20px; line-height: 4em; box-shadow: 0 0 18px 0 #1c87c9; > style> head> body> div> h1>Shadow around Border h1> div> body> html>

Moreover, it is possible to change the color of the box-shadow effect when the mouse comes over it. For that purpose, give additional styling to your hover by defining box-shadow for it.

Example of adding a box-shadow with a hovering effect:

html> html> head> title>Title of the document title> style> html, body < height: 100%; padding: 0; margin: 0; > body < display: flex; align-items: center; justify-content: center; > div < padding: 10px 20px; border-radius: 30px; line-height: 4em; box-shadow: 0 0 18px 0 #1c87c9; > div:hover < box-shadow: 0 0 18px 0 red; cursor: pointer; > style> head> body> div> h1>Hover over Me! h1> div> body> html>

If you want to go further and have inner box shadows you can do it by just adding the “inset” value for your box-shadow.

Example of adding an inner box-shadow:

html> html> head> title>Title of the document title> style> html, body < height: 100%; padding: 0; margin: 0; > body < display: flex; align-items: center; justify-content: center; color: #095484; > div < padding: 10px 20px; border-radius: 30px; line-height: 4em; box-shadow: 0 0 20px #095484; > div:hover < box-shadow: inset 0 0 70px #095484; cursor: grab; style> head> body> div> h1>Hover over Me to See the Inner Shadow h1> div> body> html>

Now, let’s see a full pack of impressive box-shadow effects which you are free to copy and use:

Example of adding various shadow effects:

html> html> head> title>Title of the document title> style> body < background: #b7d0e2; > .box h3 < text-align: center; position: relative; top: 80px; > .box < width: 70%; height: 200px; background: #d9d9d9; margin: 40px auto; color: #577491; > /*================================================== * Effect 1 * ===============================================*/ .effect1 < -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; > /*================================================== * Effect 2 * ===============================================*/ .effect2 < position: relative; > .effect2:before, .effect2:after < z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); > .effect2:after < -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; > /*================================================== * Effect 3 * ===============================================*/ .effect3 < position: relative; > .effect3:before < z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); > /*================================================== * Effect 4 * ===============================================*/ .effect4 < position: relative; > .effect4:after < z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); > /*================================================== * Effect 5 * ===============================================*/ .effect5 < position: relative; > .effect5:before, .effect5:after < z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); > .effect5:after < -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 10px; left: auto; > /*================================================== * Effect 6 * ===============================================*/ .effect6 < position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; > .effect6:before, .effect6:after < content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 50%; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; > .effect6:after < right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); > /*================================================== * Effect 7 * ===============================================*/ .effect7 < position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; > .effect7:before, .effect7:after < content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 0; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; > .effect7:after < right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); > /*================================================== * Effect 8 * ===============================================*/ .effect8 < position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; > .effect8:before, .effect8:after < content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 10px; bottom: 10px; left: 0; right: 0; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; > .effect8:after < right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); > style> head> body> div class="box effect1"> h3>Effect 1 h3> div> div class="box effect2"> h3>Effect 2 h3> div> div class="box effect3"> h3>Effect 3 h3> div> div class="box effect4"> h3>Effect 4 h3> div> div class="box effect5"> h3>Effect 5 h3> div> div class="box effect6"> h3>Effect 6 h3> div> div class="box effect7"> h3>Effect 7 h3> div> div class="box effect8"> h3>Effect 8 h3> div> body> html>

Источник

CSS Text Shadow and Box Shadow Effects (with Examples)

With CSS3 you can create two types of shadows: text-shadow (adds shadow to text) and box-shadow (adds shadow to other elements).

CSS3 Text Shadow

The text-shadow property can take up to four values:

• the horizontal shadow
• the vertical shadow
• the blur effect
• the color

Examples:

Multiple Shadows

To achieve this, you simply add a comma between two (or more) sets of values:

CSS3 Box Shadow

The box-shadow property can take up to six values:

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

Examples:

.first-div < box-shadow: 1px 1px 5px 3px grey; >.second-div < box-shadow: 0 0 5px 1px lightgrey; >.third-div

More Information:

If this article was helpful, tweet it .

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник