Conic Gradients
I've never used conic gradients and wanted to give them a try. It looks like the spec is still in the works, but it looks like it will be really useful when it has better browser support. Right now the gradient won't display on Firefox, so I have to keep that in mind. I'm not sure if the solution of using a second layer is ideal, so I'll have to keep that in mind if I plan on using them.
CSS
View the code:
HTML and JS
<div class="conic">CSS</div>CSS
:root {
--primary-color: #ff0000;
--secondary-color: #00ff00;
--tertiary-color: #0000ff;
}
.conic {
font-weight: 900;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 20rem;
max-height: 100vh;
width: 100%;
background: var(--primary-color);
color: rgba(255, 255, 255, 1);
font-size: 11.33em;
position: relative;
z-index: 3;
}
.conic:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: conic-gradient( var(--primary-color, black), var(--secondary-color, red), var(--tertiary-color, blue));
width: 100%;
height: 100%;
z-index: -10;
}