Css Box Shadow

CSS box shadow

Created By: chatGPT

The box-shadow property in CSS allows you to add shadow effects around an element's frame. It can be used to create depth and dimension on your designs.

selector {
    box-shadow: h-offset v-offset blur spread color;
}

Here's a breakdown of the values:

h-offset: Horizontal offset of the shadow. Positive values place the shadow to the right, and negative values place it to the left.
v-offset: Vertical offset of the shadow. Positive values place the shadow below the box, and negative values place it above.
blur: The blur radius of the shadow. The higher the number, the more blurred the shadow becomes.
spread: The spread radius. Positive values cause the shadow to expand, while negative values cause it to contract.
color: The color of the shadow. You can use named colors, HEX, RGB, RGBA, HSL, or HSLA.

box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

You can also use multiple shadows by separating them with a comma. This is useful for creating complex shadow effects.

box-shadow: 2px 2px 5px #888888, 5px 5px 15px #444444;

To create an inset shadow, which appears inside the box, you can add the inset keyword before the values.

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

Here’s an example of how you might use box-shadow in a CSS rule for a card element:

.card {
    width: 300px;
    height: 200px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}