<div class="gradient"></div>
@layer demo {
.gradient {
background: linear-gradient(to right, blue, white);
}
}
@layer demo.support {
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
color-scheme: dark light;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
place-content: center;
}
.gradient {
inline-size: 75vmin;
aspect-ratio: 16/9;
border-radius: 30px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.