0

How can I create a background transition from HEX color to gradient and back?

My variable --base is just white and the transition between HEX and gradient doesn't work.

: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>

When i trying change --base to radial-gradient(#FFFFFF, #FFFFFF) so doesn't work too. Have anyone solution for this?

JSFiddle

TheCzechTayen
  • 267
  • 4
  • 17
  • Not sure if I get your problem. You have white div, you hover over it and in changes the colour immediately. Do you have issues in fading in this colour or? – Luka Mar 30 '20 at 18:44
  • I want to apply a transition that doesn't work. The background changes immediately regardless of the transition value. I want smooth 1s transition from this white to gradient and back. – TheCzechTayen Mar 30 '20 at 18:51

1 Answers1

1

I created a solution for you: https://jsfiddle.net/axgq60ro/4/ In order to create a transition between these two, you need to use the trick with z-index. For further information check this article: https://keithjgrant.com/posts/2017/07/transitioning-gradients/ Have a nice day!

div:hover::before {
   opacity: 1;
}
Luka
  • 171
  • 1
  • 1
  • 19