gradients Archives - CSS-Tricks

Transitioning Gradients

# July 12, 2017 By Chris Coyier

Keith J. Grant:

In CSS, you can't transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two.

He documents a clever tactic of positioning a pseudo element covering the element with a different background and transitioning the opacity of that pseudo element. You also need a little z-index trickery to ensure any content inside stays visible.

Gosh, I remember a time not so long ago pseudo elements weren't transitionable!

I figured as long as we're using a pseudo element here, I'd document a few others ways as well. We could always move the position of a longer element, making it look like a gradient transition. Or, we could use a half-transparent gradient and transition a solid background behind it.

gradients

Easing Linear Gradients

# May 8, 2017 By Andreas Larsen

Linear gradients are easy to create in CSS and are extremely useful. As we'll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway!

(more…)

A Thing To Know about Gradients and “Transparent Black”

# January 10, 2017 By Chris Coyier

Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this:

.element {
  background: linear-gradient(
    to bottom,
    red, 
    transparent
  );
}

There is a pretty big gotcha here, though.

(more…)

color gradients Sass