gradients Archives - CSS-Tricks

Radial Gradient Recipes

# April 26, 2018 By Chris Coyier

Radial gradients are pretty dang cool. It's amazing we can paint the background of an element with them so easily. Easily is a relative term though. It's certainly easier than needing to create a graphic in third-party software to use as the background, and the syntax is highly learnable. But it's also not that easy to remember if you don't use it often, and it's more complicated than linear-gradient().

I figured I'd put together a page of reference examples, so if you know what you need but forget the syntax, it's easy to find that starter code example here.

(more…)

gradients radial-gradient

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

CSS Repeating Gradients

# May 21, 2017 By Geoff Graham

Repeating gradients take a trick we can already do with the creative use of color-stops on the linear-gradient() and radial-gradient() notations, and bakes it in for us.

The idea is that we can create patterns out of the gradients we create and allow them to repeat infinitely.

(more…)

gradients repeating gradient

CSS Conic Gradient

# May 21, 2017 By Geoff Graham

A conic gradient is similar to a radial gradient. Both are circular and use the center of the element as the source point for color stops. However, where the color stops of a radial gradient emerge from the center of the circle, a conic gradient places them around the circle.

gradients

CSS Radial Gradient

# May 21, 2017 By Geoff Graham

A radial gradient differs from a linear gradient in that it starts at a single point and emanates outward. Gradients are often used to simulate a light source, which we know isn't always straight. That makes them useful to make the transitions between colors seem even more natural.

gradients

CSS Linear Gradient

# May 21, 2017 By Geoff Graham

Perhaps the most common type of gradient we see in web design is the linear-gradient(). It's called "linear" because the colors flow from left-to-right, top-to-bottom, or at any angle you chose in a single direction.

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…)

easing gradients postcss

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