Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Shadows | Decorative Effects
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

bookShadows

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.
html

index

css

index

js

index

copy

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.

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 5. Chapter 5
some-alt