CSS Gradients & Shadows

Gradients

Gradients create smooth transitions between colors. CSS provides two main gradient functions.

linear-gradient

Creates a straight-line gradient:

Example

<style>
.gradient-1 {
  background: linear-gradient(to right, #3498db, #2ecc71);
  height: 80px;
  margin-bottom: 10px;
}
.gradient-2 {
  background: linear-gradient(135deg, #e74c3c, #f39c12, #2ecc71);
  height: 80px;
}
</style>
<div class="gradient-1">Left to right gradient</div>
<div class="gradient-2">Diagonal multi-color gradient</div>

radial-gradient

Creates a circular/elliptical gradient:

Example

<style>
.radial {
  background: radial-gradient(circle, #3498db, #2c3e50);
  height: 150px;
  border-radius: 50%;
}
</style>
<div class="radial">Radial gradient circle</div>

Shadows

box-shadow

Adds shadow effects to elements:

Example

<style>
.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  background: white;
  border-radius: 8px;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
</style>
<div class="card">Card with shadow</div>

text-shadow

Adds shadow to text:

Example

<style>
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
</style>
<h1>Heading with shadow</h1>

❓ FAQ

📖 Summary

• Gradients and shadows are two powerful tools for visual quality
• linear-gradient is most common for buttons, backgrounds, overlays
• box-shadow adds depth; card hover shadows are the most common use
• text-shadow decorates text; drop-shadow follows actual element contours
• Combining both creates more polished, layered designs

📝 Exercises

1. Create a gradient button — left-to-right color transition, direction changes on hover.
2. Create a "floating card" — subtle shadow by default, deeper shadow + lift on hover.
3. Use repeating-linear-gradient to create a striped background pattern.
4. Add text-shadow or drop-shadow glow effect to a PNG icon or text.