Is there a way to smoothly transition the background from a HEX color to a gradient and back?
I've set my variable --base as white, but the transition between HEX and gradient isn't working.
:root {
--app: radial-gradient( circle 753.6px at 10% 20%, rgba(248,167,221,1) 0%, rgba(230,192,254,1) 41%, rgba(169,217,243,1) 90% );
--base: #FFFFFF; /* radial-gradient(#FFFFFF, #FFFFFF) */
}
body {
background: #DDD;
}
div {
height: 100px;
line-height: 100px;
text-align: center;
width: 300px;
background: var(--base);
transition: all 1s ease;
}
div:hover {
background: var(--app);
}<div>test</div>Even when I try changing --base to radial-gradient(#FFFFFF, #FFFFFF), it still doesn't work. Does anyone have a solution for this issue?