CSS Shadows

CSS Shadows can add depth and visual interest to your elements. There are two primary types: box-shadow for elements like divs and buttons, and text-shadow for text elements like headings and paragraphs. Shadows can enhance the appearance of your design, giving it a more polished and modern look.

📐 Syntax:

/* Box Shadow Syntax */
.box {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

/* Text Shadow Syntax */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
  

🧪 Live Example:

🔧 Common Properties:

• box-shadow: → Adds shadow to an element. It takes values for horizontal offset, vertical offset, blur radius, spread radius, and color.
• text-shadow: → Adds shadow to text. Similar to box-shadow, but applied to text, taking horizontal offset, vertical offset, blur radius, and color.

📱 Responsive Layout Tip:

Ensure shadows aren’t too heavy on small screens. Heavy shadows can cause layout issues or make the page look cluttered. Adjust them based on screen size if needed using media queries.