Box element in CSS

Add a box element to a card like element:

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

The box-shadow property takes values for

• offset-x (how far to push the shadow horizontally from the element).
• offset-y (how far to push the shadow vertically from the element).
• blur-radius.
• spread-radius.
• color.

The blur-radius and spread-radius values are optional.

Multiple box-shadows can be created by using commas to separate the properties of each box-shadow element.

Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

 Decrease the opacity of an element:

The opacity property in CSS is used to adjust the opacity, or conversely, the transparency for an item.

A value of 1 is opaque which isn't transparent at all.

A value of 0.5 is half see-through.

A value of 0 is completely transparent.

The opacity of an element's content is set by:

"opacity: value;" in the class of the given element.

The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.