Try it Yourself: Graphics on the Web

Graphics on the Web

<!DOCTYPE html>
<html>
<head>
<style>
.banner {
  background: linear-gradient(135deg, #4f46e5, #ec4899);
}

.badge {
  background: radial-gradient(circle at 30% 30%, #ffffff, #94a3b8);
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="banner"></div>
<div class="badge"></div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.banner {
  background: linear-gradient(135deg, #4f46e5, #ec4899);
}

.badge {
  background: radial-gradient(circle at 30% 30%, #ffffff, #94a3b8);
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="banner"></div>
<div class="badge"></div>

</body>
</html>