CSS - Box Shadow


Creating a Basic Box Shadow

The box-shadow property in CSS lets you add shadow effects to elements. To create a basic box shadow, use the syntax: box-shadow: offset-x offset-y color;.

The offset-x and offset-y values set the horizontal and vertical distance of the shadow from the element. A positive offset-x value moves the shadow to the right, while a negative value moves it to the left. Similarly, a positive offset-y value moves the shadow down, and a negative value moves it up.

The default color of the box shadow is the text color of the element. You can change this using any valid CSS color value like a color keyword, hexadecimal value, or RGB value.

Example: Basic box shadow with a 5-pixel horizontal offset, 5-pixel vertical offset, and gray color

.box {
  box-shadow: 5px 5px #888888;

Example: Adjusting the offset of the shadow

.box {
  box-shadow: 2px 2px #888888; /* Smaller offset */

.box {
  box-shadow: 10px 10px #888888; /* Larger offset */

By changing these values, you can position the shadow around an element as needed.

You can apply this property to any element like <div>, <p>, <img>, and more. Experiment with different offsets and colors to create various styles that fit your design needs.

Multiple Box Shadows

CSS lets you apply multiple box shadows to one element. By separating the box-shadow values with commas, you can layer shadows to create complex effects.

To apply multiple shadows, use this syntax:

Example: Multiple Shadows Syntax

.box {
  box-shadow: shadow1, shadow2, ...;

Each shadow uses the same parameters as a single box shadow: offset-x, offset-y, blur-radius, spread-radius, and color. The shadows are applied in the order they are listed, with the first shadow on top.

Example: Layering Multiple Box Shadows

.box {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
              0 6px 20px rgba(0, 0, 0, 0.19);
  • The first shadow has a smaller offset and blur radius.
  • The second shadow has a larger offset and blur radius.

By adjusting each value of each shadow, you can create various effects such as:

  • Shadows in different directions
  • Shadows with different colors and opacities
  • Layered shadows for depth

Example: Creating a Complex Shadow Effect

.box {
    0 10px 20px #ff0000,
    0 20px 30px #00ff00,
    0 30px 40px #0000ff;

This example uses three shadows with different colors (red, green, blue) and increasing blur radii to create a glowing multi-colored effect.

Experiment with different combinations of offsets, blur radii, spread radii, and colors to create unique, eye-catching styles. Multiple box shadows give flexibility to build intricate, layered effects that enhance visual appeal of elements.

Inset Box Shadows

An inset box shadow is a shadow effect that appears inside an element, making it look sunken or hollow. Unlike regular box shadows that create an outer shadow effect, inset shadows create a shadow within the element's borders.

To create an inset shadow, add the inset keyword before the shadow values in the box-shadow property:

Example: CSS code to create an inset shadow

.box {
  box-shadow: inset offset-x offset-y blur-radius spread-radius color;

The inset keyword tells the browser to render the shadow inside the element. The other parameters work like regular box shadows:

  • offset-x and offset-y: The horizontal and vertical distance of the shadow.
  • blur-radius: The amount of blur applied to the shadow.
  • spread-radius: The size of the shadow.
  • color: The color of the shadow.

Example: Creating an Inner Shadow Effect

.box {
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);

This example creates a subtle inset shadow that gives the element a slightly sunken appearance. The shadow is offset by 2 pixels horizontally and vertically, has a 4-pixel blur radius, and uses a semi-transparent black color.

You can combine inset shadows with regular box shadows to create more complex effects:

Example: Combining inner and outer shadows

.box {
    2px 2px 4px rgba(0, 0, 0, .20),
    inset 1px 1px 2px rgba(0, 0, 0, .10);

In this example, the element has both an outer shadow and an inner one. The outer shadow creates a raised effect while the inner one adds subtle depth.

Inset shadows can be used to create styles like:

  • Simulating depth and dimension
  • Creating pressed or clicked button effect
  • Styling form input fields
  • Adding texture and visual interest to elements

By adjusting the offset, blur, spread, and color values, you can create inset shadows that range from subtle shading to dramatic sunken effects. Experiment with different combinations to achieve the desired look for your design.

Box Shadow and Transparency

The box-shadow property in CSS lets you create shadows with different levels of transparency using the rgba() color function. By adjusting the alpha value (opacity) in rgba(), you can control the transparency of the shadow.

To create a transparent shadow, use the rgba() function instead of a hex color code or color keyword. The rgba() function takes four values: red, green, blue, and alpha (opacity). The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

Example: Transparent box shadow using rgba()

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

Here, the shadow is black with 50% opacity (0.5). Adjusting the alpha value lets you create shadows with different levels of transparency. Transparent shadows are useful for creating soft effects that blend well with backgrounds. They can add depth and dimension to elements without being too harsh.

You can also overlay multiple transparent shadows to create more complex effects. By stacking shadows with different offsets, blur radii, and opacity levels, you can achieve unique results.

Example: Overlaying transparent shadows

.box {
    0 4px 6px rgba(0, 0, 0, .1),
    0 .25rem .75rem rgba(255, 255, 255, .08);

In this example, two transparent shadows are overlaid. The first shadow has a larger offset and blur radius with low opacity, creating a soft effect, while the second one has a smaller offset, adding slight sharpness overall. By experimenting with combinations of these parameters like offsets, blur radii, etc., you will be able to achieve various effects such as soft natural-looking shadows, glowing or halo-like shadows, realistic depth lighting, and smooth transitions blending into the background.

Using transparency in box-shadows allows greater flexibility and creativity, seamlessly integrating them into the overall design and enhancing the visual appeal of the elements.

Box Shadow and Border Radius

When applying box shadows to elements with rounded corners using the border-radius property, the shadow follows the shape of the element. Sometimes, the shadow may not look as smooth or rounded as desired. To create a smooth, rounded shadow that matches the border radius, you can adjust the shadow's blur radius and spread radius.

To apply a shadow to an element with rounded corners, use the box-shadow property along with the border-radius property:

Example: Applying Shadow to Rounded Corners

.box {
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

The element has a border radius of 10 pixels and a box shadow with a vertical offset of 4 pixels and blur radius of 6 pixels in semi-transparent black color.

To make the shadow look smoother and more rounded, increase the blur radius and add a small spread radius:

Example: Adjusting Shadow for Border Radius

.box {
  border-radius: 10px;
  box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.1);

Here, the blur radius is increased to 12 pixels, and 2-pixel spread radius is added. The increased blur softens the shadow's edges while the spread radius expands the shadow, making it look more rounded and matching the border radius better.

You can experiment with different blur and spread values to achieve the desired smoothness and roundness of the shadow. A larger blur will create a soft shadow, while a larger spread will make the shadow more pronounced and rounded.

Example: Creating Smooth Rounded Shadow

.box {
  border-radius: 20px;
  box-shadow: 0 6px 20px 4px rgba(0, 0, 0, 0.15);

In this example, the element has a larger border radius of 20 pixels, and the shadow has a larger vertical offset of 6 pixels, blur radius of 20 pixels, and spread radius of 4 pixels. This creates a very smooth, rounded shadow that follows the element closely.

When using box shadows with border radius:

  • Adjust blur to control softness.
  • Use spread to expand or contract.
  • Balance values for the desired shape.
  • Experiment for the perfect result.

Animating Box Shadows

CSS allows you to animate box shadows, creating dynamic visual effects. You can use the transition property to change the shadow's properties over time or create more complex animations using keyframes.

To animate a box shadow using the transition property, specify the properties you want to transition and the duration of the transition:

Example: Animate Box Shadow Using Transition Property

.box {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;

.box:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);

The box has an initial shadow with a vertical offset of four pixels and a blur radius of six pixels. When hovered over, the shadow's vertical offset increases to eight pixels and its blur radius increases to twelve pixels. The transition property ensures a smooth change between these states over a duration of .3 seconds with an easing function of ease.

You can create various hover effects by changing the shadow's offset, blur radius, spread radius and color values:

Example: Hover Effects Using Box Shadow

.box {
        .125rem .25rem .5rem rgba(255,.1),
        -.125rem -.25rem .5rem rgba(255,.1);
        all linear,
        transform cubic-bezier(.4,-2,.6,-2) infinite;

.box:hover {
        translateX(-50%) rotateY(-180deg)

There are two shadows on opposite sides that will move in opposite directions when hovered.

For more complex animations, use CSS keyframes which allow you to define multiple states at different points in time:

Example: Complex Animations Using CSS Keyframes

@keyframes pulseShadow {  
    from {box-shadow:none}  
    from {box-shadow:.125em}  

animation:pulseShadow infinite alternate ease-in-out;

This animation creates a pulsating effect where at start (from) there is no shadow, but it grows larger as it progresses through each frame until reaching its maximum size before repeating itself again infinitely, creating continuous pulses.

You can create various effects using keyframes such as:

  • Shadow color transitions
  • Rotating or moving shadows
  • Pulsing or breathing shadows

By combining transitions, hover effects, and keyframe animations together, you can add dynamic elements to your designs, making them interactive and visually appealing!