33 lines
514 B
HTML
33 lines
514 B
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<style>
|
|
div {
|
|
height: 50px;
|
|
width: 200px;
|
|
}
|
|
|
|
.has-gradient {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
yellow 30%,
|
|
purple 95%
|
|
);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h4>These three gradients should NOT look the same</h4>
|
|
|
|
<p>Interpolating in sRGB (default)</p>
|
|
<div class="has-gradient"></div>
|
|
|
|
<p>Interpolating in HSL</p>
|
|
<div class="has-gradient"></div>
|
|
|
|
<p>Interpolating in Oklch</p>
|
|
<div class="has-gradient"></div>
|
|
</body>
|
|
</html>
|