How to use CSS box-shadow: 13 tricks and examples

Как использовать CSS box-shadow: 13 хитростей и примеров

Content
What is CSS box-shadow?
1 Add a dim box shadow to the left, right and bottom of the box.
2 Add a darkened shadow to all sides.
3 Add a subtle box shadow to the bottom and right sides.
4 Add dark shadow to all sides.
5 Add a diffuse shadow to all sides.
6 Add subtle shadows to all sides.
7 Add shadow to the bottom and left sides.
8 Add a dim box shadow on the top and left sides, and a dark box shadow on the bottom and right sides.
9 Add a subtle colored shadow to all sides.
10 Add some colored shadow borders to the bottom and left sides of the box.
11 Add some colored shadows to the bottom.
12 Add some colored shadow borders to the bottom and right sides of the box.
13 Add light shadows to the left and right sides, and spread the shadow to the bottom.
Integrate CSS with HTML page

Internal CSS
Inline CSS
External CSS
Make your web page elegant with CSS

Shiny boxes look boring. Decorate them with the CSS box-shadow effect!

CSS is the language that developers use to style a web page. It controls how HTML elements are displayed on screen, on paper, or on any other medium. CSS provides all the customization options for styling a web page to match your own image.

You can change the background color of an element, font style, font color, box shadow, margins and many other properties using CSS. In this tutorial, we’ll show you how to use box-shadow effectively.

What is CSS box-shadow?

Property box-shadow used to apply drop shadow to HTML elements. This is one of the most commonly used CSS properties for styling blocks or images.

CSS syntax:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. horizontal offset: if a bias horizontally positive, the shadow will be to the right of the margin. And if the horizontal offset is negative, the shadow will be to the left of the margin.
  2. vertical offset: if the vertical offset is positive, the shadow will be below the rectangle. And if the vertical offset is negative, the shadow will be above the rectangle.
  3. blur radius: than the higher the value, the more blurry the shadow will be.
  4. Spread radius: shows how much the shadow should spread. Positive values ​​increase the spread of the shadow, negative values ​​decrease the spread.
  5. Color: indicates the color of the shadow. Moreover, it supports any color format like rgba, hex or hsla.

Blur, spread and color options are optional. The most interesting part of box-shadow is that you can use a comma to separate box-shadow values ​​any number of times. This can be used to create multiple borders and shadows on elements.

1 Add a dim box shadow to the left, right and bottom of the box.

You can add very faint shadows to the 3 sides (left, right and bottom) of the box using the following box-shadow CSS with your target HTML element:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

2 Add a darkened shadow to all sides.

You can add light shadows to all sides of the box using the following box-shadow CSS with your target HTML element:

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

3 Add a subtle box shadow to the bottom and right sides.

You can add shadows to the bottom and right side of the box using the following box-shadow CSS with your target HTML element:

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

4 Add dark shadow to all sides.

You can add a dark shadow to all sides of the box using the following box-shadow CSS with your target HTML element:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

5 Add a diffuse shadow to all sides.

You can add a diffuse drop shadow to all sides of the box using the following command with your target HTML element:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

6 Add subtle shadows to all sides.

You can add a simple border-shadow to all sides of the box using the following CSS with your target HTML element:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

7 Add shadow to the bottom and left sides.

You can add a shadow to the bottom and left sides of the box using the following box-shadow CSS with your target HTML element:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

8 Add a dim box shadow on the top and left sides, and a dark box shadow on the bottom and right sides.

You can add a light shadow to the top and left side of the box, and a dark shadow to the bottom and right sides of the box, using the following CSS with your target HTML element:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

9 Add a subtle colored shadow to all sides.

You can add a simple colored border shadow to all sides of the box using the following box-shadow CSS with your target HTML element:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

10 Add some colored shadow borders to the bottom and left sides of the box.

You can add multiple colored drop shadows to the bottom and left sides of the box using the following CSS with your target HTML element:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

11 Add some colored shadows to the bottom.

You can add multiple colored shadows to the bottom of the box using the following box-shadow CSS with your target HTML element:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

12 Add some colored shadow borders to the bottom and right sides of the box.

You can add multiple colored drop shadows to the bottom and right sides of the box using the following CSS with your target HTML element:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

13 Add light shadows to the left and right sides, and spread the shadow to the bottom.

You can add light shadows to the left and right sides and spread the shadow to the bottom of the box using the following box-shadow CSS with your target HTML element:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Integrate CSS with HTML page

Now that you know how to add cool block shadow effects using CSS, you can easily integrate them with HTML elements in a variety of ways.

You can embed it in the HTML page itself, or attach it as a separate document. There are three ways to include CSS in an HTML document:

Internal CSS

Inline or internal style sheets are inserted into the section HTML document using element … You can create any number of items in an HTML document, but they must be enclosed between tags and … Here’s an example demonstrating how to use internal CSS with an HTML document:

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS box-shadow</title> <style type="text/css"> .heading { text-align: center; } .image-box { display: block; margin-left: auto; margin-right: auto; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } </style> </head> <body> <div> <h2 class="heading">Style 4<h2> <img class="image-box" src="MUO.jpg"> </div> </body></html>

Inline CSS

Inline CSS is used to add unique styling rules to an HTML element. It can be used with HTML element via attribute style… The style attribute contains the CSS properties of the form “Property: value”, separated by semicolons (; ).

All CSS properties must be on one line, i.e. There should be no line breaks between CSS properties. Here’s an example demonstrating how to use inline CSS with an HTML document:

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS box-shadow</title> </head> <body> <div> <h2 class="heading" style="text-align: center;">Style 4<h2> <img src="MUO.jpg" class="image-box" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin-left: auto; margin-right: auto;"> </div> </body></html>

External CSS

External CSS is the most ideal way to style HTML documents. An external style sheet contains all the style rules in a separate document (.css file), then this document is linked to the HTML document using tag … This method is the best method for defining and applying styles to HTML documents, since the affected HTML file requires minimal markup changes. Here’s an example demonstrating how to use external CSS with an HTML document:

Create a new CSS file with the extension .css… Now add the following CSS to this file:

.heading { text-align: center;}.image-box { display: block; margin-left: auto; margin-right: auto; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}

Finally, create an HTML document and add the following code to it:

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS box-shadow</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div> <h2 class="heading">Style 4<h2> <img class="image-box" src="MUO.jpg"> </div> </body></html>

Note that the CSS file is linked to the HTML document via tag and attribute href

All three of the above methods (Inner CSS, Inline CSS, and Outer CSS) will render the same output –

Make your web page elegant with CSS

By using CSS, you have complete control over the styling of your web page. You can customize each HTML element using various CSS properties. Developers from all over the world have been contributing to CSS updates, and they have been doing so since its release in 1996. So there is a lot for newbies to learn!

Fortunately, CSS is beginner friendly. You can get great practice by starting with a few simple commands and seeing where your creativity takes you.

How to use CSS box-shadow: 13 tricks and examples

Recording source: makeuseof.com

Leave a Reply

Your email address will not be published. Required fields are marked *