39 lines
750 B
HTML
39 lines
750 B
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style>
|
|
.has-gradient {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
yellow 30%,
|
|
purple 95%
|
|
);
|
|
}
|
|
|
|
.text {
|
|
font: 50px/1 Ahem;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-fill-color: transparent;
|
|
width: fit-content;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h4>These three gradients should NOT look the same</h4>
|
|
|
|
<p>Interpolating in sRGB (default)</p>
|
|
<p class="text has-gradient">ABCD</p>
|
|
|
|
<p>Interpolating in HSL</p>
|
|
<p class="text has-gradient">ABCD</p>
|
|
|
|
<p>Interpolating in Oklch</p>
|
|
<p class="text has-gradient">ABCD</p>
|
|
</body>
|
|
</html>
|