Course Content
CSS Fundamentals
CSS Fundamentals
Shadows
We can use box shadows to create a visual effect where an element appears to float above the background. This effect can create depth, highlight specific elements, and add visual interest to a webpage. To achieve it we can apply the box-shadow
property.
offset-x
refers to the horizontal positioning of the shadow, with a positive value shifting the shadow to the right of the element and a negative value shifting it to the left;offset-y
refers to the vertical positioning of the shadow, with a positive value shifting the shadow downwards and a negative value shifting it upwards;blur-radius
sets the degree of blurring for the shadow and is an optional value, with a higher value producing a more blurred shadow;spread-radius
is also optional, increases or decreases the size of the shadow based on its positive or negative value;color
specifies the color of the shadow using any valid color format, and is also an optional value.
index
index
index
Note
To find the best suited shadow visit the source shadow generator.
In addition to box-shadow
, text-shadow
and drop-shadow
properties allow us to create shadows for text and other elements, respectively. They work the same way as the box-shadow
property. However, these properties are used rarely in comparison with box-shadow.
Thanks for your feedback!