How to box shadow in css

CSS box-shadow Property

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

Default value:	none
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.boxShadow=»10px 20px 30px blue» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

CSS Syntax

Note: To attach more than one shadow to an element, add a comma-separated list of shadows (see «Try it Yourself» example below).

Property Values

Value	Description	Demo
none	Default value. No shadow is displayed	Demo ❯
h-offset	Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box	Demo ❯
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box	Demo ❯
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be	Demo ❯
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow	Demo ❯
color	Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.

More Examples

Example

Add a blur effect to the shadow:

Источник

How to Create Beautiful Box Shadows in HTML and CSS

Whenever you’re designing a card in HTML, box shadows play a vital role in making the cards stand out.

Whether its a pricing page card or even an e-commerce product listing card, box shadows can make or break the look and the entire message that that cards need to convey.

Today, let’s understand how to make beautiful box shadows and how to make them stand out.

Understanding Box Shadow Syntax

Here’s the basic syntax for a box shadow:

box-shadow: 1px 2px 3px 4px rgba(20,20,20,0.4);

There are 5 important parts in the above code snippet. Let’s understand what they mean:

1. Horizontal Offset: 1px in the above example. This indicates how far the shadow will be from the card horizontally. Positive means to the right, negative means to the left.
2. Vertical Offset: 2px in the above example. This indicates how far the shadow will be from the card vertically. Positive means to the bottom, negative means to the top.
3. Blur: 3px in the above example. This indicates how blurry the shadow will look. Higher radius means more blur.
4. Spread: 4px in the above example. This indicates how far the shadow will spread in all directions.
5. Color: rgba(20,20,20,0.4) in the above example. This determines the color of the shadow. If not supplied, the default text color will be used. Color values can be Hex, RGB, or HSL.

Let’s see the above code in action:

The first example has no box shadow, while the second example has a box shadow. The second one appears to be popping out of the screen (that makes it stand out a little as compared to the first one.)

So, if you need your cards to stand out, box shadows can help you make them really pop.

Let’s say you’re building an e-commerce application and you want your product cards to stand out. Box shadows can help you achieve this and get your customers to notice your products.

Even if your web application requires your cards to be subtle, you can always go with subtle box shadows to give a more pleasing aesthetic feel to the cards.

How to Use Multiple Layers Of Box Shadows

You can use more than one layer of box shadows in your cards – and you’ll likely do this a lot.

The syntax to create multiple layers of box shadows look like this:

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;

Each individual box shadow is separated by a comma ( , ). You can add as many as you want but I recommend to limit yourself to at most 5.

The above example looks something like this:

My website is simple and does one job – it showcases my personality and what I do. If I go on to add a red box shadow to the above boxes, it might not look that good. But if I use gray shadow with some amount of blur, it just helps it stand out without being too in-your-face.

So how do you use them correctly? Let’s look at an example.

• Background color: rgb(251 113 133);
• Box Shadow: box-shadow: rgba(254, 205, 211, 0.1) 0px 4px 16px, rgba(254,205,211,0.1) 0px 8px 24px, rgba(254,205,211, 0.1) 0px 16px 56px;

The box shadow is a lighter shade of the background color that we used in the above example. And there are three layers of shadows.

When we have a background color, it’s generally a good idea to have colored shadows of a lighter shade of the background color that is being used. This looks better than having a plain white or black shadow.

How to Use Inner Shadows

All the above examples covered shadows that were ‘outside’ of the card that we were trying to style. But what if we wanted to have shadows on the inside?

You can use inset box shadows if you want to have box shadows within the holding container.

Consider the below example:

The code for the shadow is:

box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

The keyword inset is used to specify that we want to use the shadow inwards and not the default behaviour that is outwards .

You can cleverly use inward box shadows in your web applications that have some important information to display. Like wells, or some alert that you’re trying to show. In that case, the item appears to be embedded inside the webpage.

Box Shadow Examples

Creating box shadows is hard, not because it is difficult but because it requires some design knowledge to get the best out of it.

I recently created an application that is a curated list of beautiful box shadows that can help your cards stand out. Currently the project is rated #2 on ProductHunt and is helping a lot of developers make their cards beautiful and effective.

You can find the project here: Tailwind Box Shadows.

Currently, You can find box shadows in Vanilla CSS and Tailwind JIT code. Click to copy and paste and you’re done. There is also a helper utility to convert CSS box shadows to Tailwind box shadows.

Conclusion

I’ve been using box shadows in almost all of my projects. It is the most underrated thing that I’ve ever come across. A good box shadow layout can really improve the visual aspects of your application.

If you liked the article, try implementing these shadows in your application and let me know what changes it brought to your app.

If you have any feedback, you can reach out to me on my Twitter and/or my Personal Website.

Источник

box-shadow

The box-shadow CSS property adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

Try it

The box-shadow property enables you to cast a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

Box-shadow generator is an interactive tool allowing you to generate a box-shadow .

Syntax

/* Keyword values */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Global values */ box-shadow: inherit; box-shadow: initial; box-shadow: revert; box-shadow: revert-layer; box-shadow: unset; 

Specify a single box-shadow using:

To specify multiple shadows, provide a comma-separated list of shadows.

Values

If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.

If both and are set to 0 , the shadow is placed behind the element (and may generate a blur effect if and/or is set).

…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.

Interpolation

When animating shadows, such as when multiple shadow values on a box transition to new values on hover, the values are interpolated. Interpolation determines intermediate values of properties, such as the blur radius, spread radius, and color, as shadows transition. For each shadow in a list of shadows, the color, x, y, blur, and spread transition; the color as , and the other values as s.

In interpolating multiple shadows between two comma-separated lists of multiple box shadows, the shadows are paired, in order, with interpolation occurring between paired shadows. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent , and X, Y, and blur are 0 , with the inset, or lack of inset, being set to match. If, in any pair of shadows, one has inset set and the other is does not, the entire shadow list is uninterpolated; the shadows will change to the new values without an animating effect.

Formal definition

Initial value	none
Applies to	all elements. It also applies to ::first-letter .
Inherited	no
Computed value	any length made absolute; any specified color computed; otherwise as specified
Animation type	a shadow list

Formal syntax

Examples

Setting three shadows

In this example, we include three shadows: an inset shadow, a regular drop shadow, and a 2px shadow that creates a border effect (we could have used an outline instead for that third shadow).

HTML

blockquote> q> You may shoot me with your words,br /> You may cut me with your eyes,br /> You may kill me with your hatefulness,br /> But still, like air, I'll rise. q> p>— Maya Angeloup> blockquote> 

CSS

blockquote  padding: 20px; box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3); > 

Result

Setting zero for offset and blur

When the x-offset , y-offset , and blur are all zero, the box shadow will be a solid-colored outline of equal-size on all sides. The shadows are drawn back to front, so the first shadow sits on top of subsequent shadows. When the border-radius is set to 0, as is the default, the corners of the shadow will be, well, corners. Had we put in a border-radius of any other value, the corners would have been rounded.

We added a margin the size of the widest box-shadow to ensure the shadow doesn’t overlap adjacent elements or go beyond the border of the containing box. A box-shadow does not impact box model dimensions.

HTML

CSS

p  box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #66ccff; margin: 4em; padding: 1em; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник