CSS Shadows Practice Questions with Solutions

By /

Introduction

CSS Shadows add depth and visual appeal to web elements. The box-shadow property creates shadows around elements like cards, buttons, and images, while the text-shadow property adds shadows to text. Shadows help improve readability, create modern user interfaces, and make important elements stand out. In this chapter, you’ll practice CSS shadows through simple solved CSS Shadows practice questions that are easy for beginners to understand.

Question 1: Add a Simple Box Shadow

Problem Statement

Write CSS to add a simple shadow to a <div> element.

CSS Code

div {    box-shadow: 5px5px10pxgray;}

Output

The <div> displays with a gray shadow below and to the right.

Explanation

  • The first value (5px) moves the shadow horizontally.
  • The second value (5px) moves the shadow vertically.
  • The third value (10px) controls the blur.
  • The last value specifies the shadow color.

Question 2: Add a Text Shadow

Problem Statement

Write CSS to add a gray shadow to a heading.

CSS Code

h1 {    text-shadow: 2px2px4pxgray;}

Output

The heading displays with a soft gray shadow behind the text.

Explanation

  • text-shadow applies a shadow to text.
  • The first two values control the shadow position.
  • The third value controls the blur radius.

Question 3: Create a Blue Box Shadow

Problem Statement

Write CSS to add a blue shadow around a button.

CSS Code

button {    box-shadow: 008pxblue;}

Output

The button displays with a blue glowing shadow.

Explanation

  • 0 0 keeps the shadow centered.
  • 8px creates a soft blur.
  • This effect is commonly used for interactive buttons.

Question 4: Create an Inset Shadow

Problem Statement

Write CSS to create a shadow inside a <div> element.

CSS Code

div {    box-shadow: inset3px3px8pxgray;}

Output

The <div> displays with an inner gray shadow.

Explanation

  • inset places the shadow inside the element.
  • Inner shadows create a pressed or recessed appearance.
  • They are commonly used in modern UI components.

Question 5: Add Multiple Shadows

Problem Statement

Write CSS to apply two shadows to a card.

CSS Code

.card {    box-shadow: 2px2px5pxgray,-2px-2px5pxlightgray;}

Output

The card displays with two soft shadows, creating a layered effect.

Explanation

  • Multiple shadows are separated by commas.
  • Each shadow has its own position, blur, and color.
  • Multiple shadows create richer visual effects.

Question 6: Create a Red Text Shadow

Problem Statement

Write CSS to add a red shadow behind a heading.

CSS Code

h2 {    text-shadow: 2px2px5pxred;}

Output

The heading displays with a red shadow behind the text.

Explanation

  • text-shadow applies a shadow to text.
  • 2px 2px positions the shadow slightly to the right and below.
  • 5px creates a soft blur effect.

Question 7: Create a Box Shadow with Spread Radius

Problem Statement

Write CSS to add a shadow with a spread radius around a <div>.

CSS Code

div {    box-shadow: 0010px5pxgray;}

Output

The <div> displays with a larger shadow that spreads outward.

Explanation

  • The first value controls the horizontal offset.
  • The second value controls the vertical offset.
  • The third value sets the blur radius.
  • The fourth value defines the spread radius, making the shadow larger.

Question 8: Remove a Shadow

Problem Statement

Write CSS to remove the shadow from a button.

CSS Code

button {    box-shadow: none;}

Output

The button displays without any shadow.

Explanation

  • none removes any existing shadow.
  • It overrides previously applied box-shadow values.
  • This is useful for creating flat designs.

Question 9: Add a Shadow to an Image

Problem Statement

Write CSS to apply a soft shadow around an image.

CSS Code

img {    box-shadow: 4px4px12pxgray;}

Output

The image displays with a soft gray shadow around it.

Explanation

  • Shadows make images stand out from the background.
  • The blur radius creates a smooth shadow effect.
  • This style is commonly used in image galleries and portfolios.

Question 10: Create a Soft Card Shadow

Problem Statement

Write CSS to create a modern shadow effect for a card.

CSS Code

.card {    box-shadow: 04px12pxrgba(0, 0, 0, 0.2);}

Output

The card displays with a soft, modern shadow beneath it.

Explanation

  • rgba() creates a semi-transparent shadow.
  • 0 keeps the shadow centered horizontally.
  • 4px moves the shadow downward.
  • 12px creates a smooth blur effect.

Key Takeaways

  • box-shadow adds shadows around HTML elements.
  • text-shadow adds shadows behind text.
  • A box shadow includes horizontal offset, vertical offset, blur radius, spread radius (optional), and color.
  • inset creates an inner shadow.
  • Multiple shadows can be added by separating them with commas.
  • box-shadow: none; removes existing shadows.
  • rgba() creates soft, semi-transparent shadows.
  • Shadows improve depth, readability, and visual appeal.

Frequently Asked Questions (FAQs)

1. What is the difference between box-shadow and text-shadow?

  • box-shadow applies shadows to HTML elements.
  • text-shadow applies shadows to text.

2. What is the syntax of box-shadow?

Example:

box-shadow: horizontalverticalblurspreadcolor;

3. What does the blur radius do?

The blur radius controls how soft or sharp the shadow appears.

4. What is a spread radius?

The spread radius increases or decreases the overall size of the shadow.

Example:

box-shadow: 0 0 10px 5pxgray;

5. How do I create an inner shadow?

Use the inset keyword.

Example:

box-shadow: inset 3px 3px 8pxgray;

6. How do I remove an existing shadow?

Use:

box-shadow: none;

7. Where are CSS shadows commonly used?

CSS shadows are commonly used for:

  • Cards
  • Buttons
  • Images
  • Navigation menus
  • Forms
  • Popups
  • Hero sections
  • Modern UI components

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top