ohopvg
Last Updated: February 25, 2016
·
7.983K
· camachgk

CSS Gradient Transitions

Using CSS gradients as part of the background-image property are great, but they don't work well for transitions. You can get around this by creating gradients that use opacities and change the background-color instead (live demo):

button
{
  background-color: #5096C8;
  @ include transition(background-color 150ms ease-in);
  @ include background-image(
    linear-gradient(
      top,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.2) 30%,
      rgba(0, 0, 0, 0.1) 60%,
      rgba(0, 0, 0, 0.3)
    )
  );

  &:hover
  {
    background-color: green;
  }
}
  • Note - there should not be a space between the "@" and "include", but Coderwall seems to make them into links when together

2 Responses
Add your response

2539

Very good idea! I struggled with css transitions on gradients for a good while and this is an excellent way to accomplish it.

over 1 year ago ·
12549

Nice, thanks for the trick!

over 1 year ago ·