A gradient hero – CSS Exercise with Solution

Build the banner at the top of a page.

What to build

A gradient banner with readable text.

Requirements

.hero has a background-color of navy, as a fallback.
.hero has a background-image of a linear gradient at 135deg, from teal to navy.
Its text colour is white, and its padding is 40px.
.hero p is fully opaque.

Constraints

Do not use the opacity property.

Example

background-image: linear-gradient(to right, red, blue);

Why it works

A gradient needs no download, and the plain background colour means that the white text stays readable even in a browser that could not draw the gradient.

Hints

Hint 1

A gradient goes on background-image or background.

Hint 2

background-color can sit under it as a fallback.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hero</title>
  <style>
    .hero {
      background-color: navy;
      background-image: linear-gradient(135deg, teal, navy);
      color: white;
      padding: 40px;
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Learn to code</h1>
    <p>Free, step by step.</p>
  </div>
</body>
</html>

Lesson: Backgrounds, borders and shadows →