• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Shadows

← Previous Next →

🔹 What Are CSS Shadows?

CSS allows you to apply shadows to text and elements to give them depth and enhance the visual appearance. The two main shadow properties are:

  • text-shadow

  • box-shadow

🔸 1. text-shadow

Adds shadow to text content.

Syntax:
text-shadow: h-offset v-offset blur-radius color;
Example:
h1 {
  text-shadow: 2px 2px 4px gray;
}

  • h-offset: horizontal shadow

  • v-offset: vertical shadow

  • blur-radius: blur level (optional)

  • color: shadow color

🔸 2. box-shadow

Adds shadow to boxes like divs, buttons, cards, etc.

Syntax:
box-shadow: h-offset v-offset blur-radius spread color;
Example:
div {
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.3);
}

  • spread: size of the shadow expansion

🔸 3. Inset Shadows

Makes the shadow appear inside the element.

box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4);

🔸 4. Multiple Shadows

You can apply more than one shadow by separating them with commas:

box-shadow: 0 0 10px red, 0 0 20px blue;

🔸 5. Colored Text Shadows

h2 {
  color: white;
  text-shadow: 1px 1px 2px black;
}

🔸 6. Shadow Blur Effects

Higher blur-radius gives a smoother, softer shadow.

box-shadow: 0 0 30px 0 rgba(0,0,0,0.5);

Practice Questions

Q1. Add a simple text-shadow to an <h1> tag.

Q2. Apply a box-shadow to a div with slight blur.

Q3. Make a glowing text effect using white text and dark background.

Q4. Add multiple shadows (red and blue) to a box.

Q5. Apply an inset shadow inside a container.

Q6. Create a shadowed button with no blur.

Q7. Style a card with a soft drop shadow.

Q8. Add text-shadow using only horizontal and vertical offsets.

Q9. Make a circular shadow around an image.

Q10. Combine inset and regular box shadows in one element.

CSS Shadows Quiz

Q1: Which property adds shadow to text?

A. text-shadow
B. box-shadow
C. shadow-text
D. text-effect

Q2: Which shadow property affects a div or button element?

A. text-shadow
B. box-shadow
C. font-shadow
D. element-shadow

Q3: What does blur-radius control in a shadow?

A. How soft or sharp the shadow looks
B. Distance from the top
C. Text size
D. Border thickness

Q4: Which keyword is used for inside shadows?

A. outer
B. inset
C. inner
D. background

Q5: Which part of box-shadow is optional?

A. spread-radius
B. h-offset
C. v-offset
D. color

Q6: How to apply multiple box shadows?

A. Separate them with commas
B. Use loop
C. Only one is allowed
D. Use array()

Q7: What will box-shadow: 0 0 0 0 black; do?

A. No visible shadow
B. Big black shadow
C. Red shadow
D. Inset only

Q8: What does a higher blur-radius create?

A. Sharper shadow
B. Softer shadow
C. Colored border
D. Bold text

Q9: Can text-shadow be applied to paragraph text?

A. Yes
B. No
C. Only for h1
D. Only for links

Q10: Which of these is a valid full box-shadow value?

A. shadow: 4px 2px red;
B. box-shadow: 2px 2px 5px 0 gray;
C. box-shadow: gray 2px 2px;
D. shadow-box: 1 1 1 red;
← Previous Next →
Login
Go Back Top