🎨

Create a Gradient Card Design 🌈

Beginner

140 XP

50 min

Lesson Content

Create a Gradient Card Design 🌈

Build stunning gradient cards that look modern and eye-catching. This is what top designers use!

Gradient Backgrounds

.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 30px;
  color: white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

Multiple Gradients

.gradient-1 {
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
}

.gradient-2 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

Example Code

Create a card with gradient background

<div class="card">
  <h2>Gradient Card</h2>
  <p>Beautiful gradient design</p>
</div>

<style>
.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  padding: 30px;
  color: white;
  width: 300px;
}
</style>

Expected Output:

Card with purple gradient background

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code