Use CSS3 transitions with gradient backgrounds

by

Gradients don’t support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).

If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and ‘transition` the opacity.

(There have been some browser releases that supported transitions on gradients (e.g IE10. I tested gradient transitions in 2016 in IE and they seemed to work at the time, but my test code no longer works.)

Update: October 2018
Gradient transitions with un-prefixed new syntax [e.g. radial-gradient(…)]now confirmed to work (again?) on Microsoft Edge 17.17134. I don’t know when this was added. Still not working on latest Firefox & Chrome / Windows 10.

Update: December 2021
This is now possible in recent Chromium based browsers using the @property workaround (but is not working in Firefox). Please see @mahozad’s answer below.

More Related Contents:

  1. css3 transition animation on load?
  2. How can I transition width of content with width: auto?
  3. Why can’t I animate custom properties (aka CSS variables)?
  4. CSS: Animation vs. Transition
  5. Animating max-height with CSS transitions
  6. CSS3 background image transition
  7. CSS 3 slide-in from left transition
  8. Changing Background Image with CSS3 Animations
  9. How to animate a radial-gradient using CSS?
  10. CSS animation delay in repeating
  11. Simulating transform-origin using translate
  12. Background-image in keyframe does not display in Firefox or Internet Explorer
  13. CSS3 Spin Animation
  14. Pure CSS scroll animation
  15. CSS3 transition on click using pure CSS
  16. Two-tone background split by diagonal line using css
  17. SVG gradient using CSS
  18. CSS transition auto height not working [duplicate]
  19. CSS how to make an element fade in and then fade out?
  20. Changing :hover to touch/click for mobile devices
  21. Can you add noise to a CSS gradient?
  22. CSS gradient checkerboard pattern
  23. Filling water animation
  24. Reuse CSS animation in reversed direction (by resetting the state?)
  25. Pure CSS animation visibility with delay
  26. Delay mouseout/hover with CSS3 transitions
  27. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  28. CSS Animation property stays after animating
  29. CSS transition fade in
  30. CSS3 transitions on pseudo-elements (:after, :before) not working?

Leave a Comment