CSS Gradient Background

Aug 21, 2025

—

<!DOCTYPE html>
<html>
<head>
  <style>
.gradient {
  width: 300px;
  height: 150px;
  background: linear-gradient(to right, red, yellow);
  text-align: center;
  line-height: 150px;
  font-weight: bold;
  color: white;
}  </style>
</head>
<body>
  <div class="gradient">Gradient Background</div>
</body>
</html>

Explanation:

linear-gradient(to right, red, yellow) creates a smooth color transition.
You can also use to bottom, to left, to top right, etc.

CSS Gradient Background

Comments

Leave a Reply Cancel reply