How to do CSS ‘Box Style’ Shadow Effect?

How to do CSS ‘Box Style’ Shadow Effect?

Share Now
4 min read
5
(1)
730

Home > Web App Development Company in Chennai

The box-shadow CSS Box Shadow property adds shadow effects around an element’s frame. Lia Infraservices the leading Mobile & Web App Development Company in Chennai & the popular Web & Mobile App development company in Chennai can help you set multiple box effects separated by commas. Basically a box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

The box-shadow property attaches one or more shadows to an element.

What is CSS Box Shadow Model?

Every element that can be displayed on a web page is comprised of one or more rectangular boxes. 

CSS box model typically describes how these rectangular boxes are laid out on a web page. 

These boxes can have different properties and can interact with each other in different ways, but every box has a content area and optional surrounding padding, border, and margin areas.

The following diagram demonstrates how the width, height, padding, border, and margin CSS properties determine how much space an element can take on a web page.

CSS Box Shadow Model representation by Lia Infraservices

How to use CSS3 Drop Shadows:

The CSS3 gives you ability to add drop shadow effects to the elements like you do in Photoshop without using any images. Prior to CSS3, sliced images are used for creating the shadows around the elements that was quite annoying.

CSS3 box-shadow Property:

The box-shadow property can be used to add shadow to the element’s boxes. You can even apply more than one shadow effect using a comma-separated list of shadows. 

The basic syntax of creating a box shadow can be given with:

Syntax: 

box-shadow: offset-x offset-y blur-radius color;

The components of the box-shadow property have the following meaning:

offset-x — Sets the horizontal offset of the shadow.

offset-y — Sets the vertical offset of the shadow.

blur-radius — Sets the blur radius. The larger the value, the bigger the blur and more the shadow’s edge will be blurred. Negative values are not allowed.

color — Sets the color of the shadow. If the color value is omitted or not specified, it takes the value of the color property.

Try It Yourself:

 The basic box shadow consists of six different properties i.e.  inset, left, top, blur, size, and color. 

CSS Demo: box-shadow

  1. box-shadow: 10px 5px 5px red;
Bottom right red shade box shadow
  1. box-shadow: 60px -16px teal;
box-shadow: 60px -16px teal
  1. box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
box-shadow: 12px 12px 2px 1px rgba
  1. box-shadow: inset 5em 1em gold;
box-shadow: inset 5em 1em gold
  1. box-shadow: 3px 3px red, -1em 0 .4em olive;
box-shadow: 3px 3px red, -1em 0 .4em olive

Note: When adding the box-shadow, if the value for the blur-radius component is not specified, or set to zero (0), the edges of the shadow will be sharp.

How to do Multiple CSS box Shadow Effect?

How to do Multiple CSS box Shadow Effect? by Lia Infraservices mobile app development company in Chennai

 Developers can also create a pop up or layering effect using the CSS3 box shadow effect. To do so use the multiple box shadow property or the text shadow property on the site’s elements. The first time the effect is used, it will appear on the top of the element. When the rest of the effects are applied, it will go on stacking up gradually giving the element a pop up or some pretty creative effects which depend on the various styles depending on how they are applied. When applying the CSS3 box shadow to an element, it will stop when it reaches the end of the element. This feature is particularly helpful when trying to create a shadow effect over a white or monochromatic background.

Conclusion:

Check out all the amazing effects using CSS3 Box Shadows and let us know which one is your favourite.

For more css box shadow effects check this out: https://getcssscan.com/css-box-shadow-examples

Contact Lia Infraservices, the leading Mobile & Web app Development Company in Chennai and the popular Android & ios Mobile App Development Company in Saudi Arabia. Is experts in creating amazing UI/UX designs with eye appealing box shadows for the mobile /web app button with CSS Box Shadow property.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Leave comment

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