Write CSS to create a card with box shadow and gradient background

Description: Create a card with a purple to blue gradient background, white text, rounded corners and a soft shadow.

Hint:

• Use background-image: linear-gradient(...).
• Use box-shadow with a transparent black colour.

---

CSS card with shadow and gradient

<style>
  .card {
    padding: 24px;
    color: white;
    border-radius: 10px;
    background-image: linear-gradient(135deg, #7b1fa2, #1976d2);
    box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.3);
  }
</style>

<div class="card">
  <h3>Gradient card</h3>
  <p>With a soft shadow.</p>
</div>

Output in the browser:

How it works

• 135deg sets a diagonal direction for the gradient.
• The shadow uses rgba with 0.3 opacity, so it looks soft.

Read CSS Gradients and CSS Shadows.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.