CSS Box Shadows Generator

Box Shadow Preview

                  1 .preview {
2 	box-shadow: 0 0 60px 0 rgba(207, 1, 208, 0.8),
3 	  inset -100px 10px 80px 20px #080707,
4 	  0 0 40px 10px rgba(245, 20, 245, 0.54),
5 	  inset 0 0 10px 0 #ffb3d5;
6 }

                  1 box-shadow = 
2     none       |
3     <shadow>#  
4   
5   <shadow> = 
6     <color>?                                   &&
7     [ <length>{2} <length [0,∞]>? <length>? ]  &&
8     inset?

Introduction

The box-shadow property in CSS is instrumental in applying shadow effects to the frame of a specific element. It offers the flexibility to implement multiple effects, which can be distinctly separated using commas. The characteristics of a box shadow are defined by several parameters: X and Y offsets, which are relative to the element itself, the blur and spread radius, and the color.

Values

inset

The optional inset keyword, when present, changes the shadow from an outer shadow (outset) to an inner shadow, effectively embossing the element into the page.

<offset-x>

The <offset-x> specifies the horizontal distance at which the shadow will be shown. Positive values position the shadow to the right of the element.

<offset-y>

The <offset-y> specifies the vertical distance at which the shadow will be shown. Positive values position the shadow below the element.

<blur-radius>

The <blur-radius> value is optional and defines the size of the blur effect for the shadow. The larger the value, the more the edge of the shadow will be blurred.

<spread-radius>

The <spread-radius> is another optional value that controls the size of the shadow. Positive values will cause the shadow to expand and cover more area, while negative values will cause the shadow to contract.

<color>

The <color> value determines the color of the shadow. This can be expressed in any valid CSS color format, such as named colors, hex values, rgb, or rgba for shadows with transparency.

Description

outset shadow 1

The shadow type is outset, implying it's drawn outside the element's frame
The shadow is 0 from the element along the horizontal axis
The shadow is 0 from the element along the vertical axis
The shadow has a blur radius of 60px, giving it a soft edge
The shadow color is set to rgba(207, 1, 208, 0.8)

inset shadow 2

The shadow type is inset, meaning it's drawn inside the element's frame
The shadow is -100px from the element along the horizontal axis
The shadow is 10px from the element along the vertical axis
The shadow has a blur radius of 80px, giving it a soft edge
The shadow has a spread radius of 20px, which affects the size of the shadow
The shadow color is set to #080707

outset shadow 3

The shadow type is outset, implying it's drawn outside the element's frame
The shadow is 0 from the element along the horizontal axis
The shadow is 0 from the element along the vertical axis
The shadow has a blur radius of 40px, giving it a soft edge
The shadow has a spread radius of 10px, which affects the size of the shadow
The shadow color is set to rgba(245, 20, 245, 0.54)

inset shadow 4

The shadow type is inset, meaning it's drawn inside the element's frame
The shadow is 0 from the element along the horizontal axis
The shadow is 0 from the element along the vertical axis
The shadow has a blur radius of 10px, giving it a soft edge
The shadow color is set to #ffb3d5