ohopvg
Last Updated: February 25, 2016
·
6.452K
· camachgk
Ad5509c3e733fb191e7c6d95c0f8234c

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
Say Thanks
Respond

2 Responses
Add your response

2539
D27d0237833f17bd8c503b038c7bbcf2

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
0 lq5wcdm23qi9jr0lf6fnc7yttcy9uz0lbxl9cm0pybe6kphaw8v5maw 72pd4xogx5bb4ds0wwnk

Nice, thanks for the trick!

over 1 year ago ·