<div data-linear-gradient="to top" style="--linear-direction: to top"></div>
<div data-linear-gradient="to right" style="--linear-direction: to right"></div>
<div data-linear-gradient="to bottom" style="--linear-direction: to bottom"></div>
<div data-linear-gradient="to left" style="--linear-direction: to left"></div>
<div data-linear-gradient="0deg" style="--linear-direction: 0deg"></div>
<div data-linear-gradient="45deg" style="--linear-direction: 45deg"></div>
<div data-linear-gradient="90deg" style="--linear-direction: 90deg"></div>
<div data-linear-gradient="135deg" style="--linear-direction: 135deg"></div>
<div data-linear-gradient="180deg" style="--linear-direction: 180deg"></div>
<div data-linear-gradient="225deg" style="--linear-direction: 225deg"></div>
<div data-linear-gradient="270deg" style="--linear-direction: 270deg"></div>
<div data-linear-gradient="315deg" style="--linear-direction: 315deg"></div>
<div data-linear-gradient="360deg" style="--linear-direction: 360deg"></div>
<div data-linear-gradient="to top right" style="--linear-direction: to top right"></div>
<div data-linear-gradient="to bottom right" style="--linear-direction: to bottom right"></div>
<div data-linear-gradient="to top left" style="--linear-direction: to top left"></div>
<div data-linear-gradient="to bottom left" style="--linear-direction: to bottom left"></div>
<div data-linear-gradient="15deg" style="--linear-direction: 15deg"></div>
<div data-linear-gradient="-225deg" style="--linear-direction: -225deg"></div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
padding: 10px 10px 30px;
gap: 30px 10px;
place-content: center;
font-family: "Exo", Arial, sans-serif;
}
:root {
--color-start: #09f;
--color-stop: #e52e71;
--linear-direction: to top;
}
div {
width: 100%;
height: 30vh;
border-radius: 5px;
position: relative;
background-image: linear-gradient(
var(--linear-direction),
var(--color-start),
var(--color-stop)
);
}
div::after {
content: attr(data-linear-gradient);
position: absolute;
top: calc(100% + 5px);
left: 50%;
transform: translate(-50%, 0);
white-space: nowrap;
font-size: 12px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.