CSS Box Shadows Generator

Created on November 12, 2023 at 10:53 am

Introduction

The box-shadow property in CSS ORG 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>

Connecting to blog.lzomedia.com... Connected... Page load complete