gradients Archives - CSS-Tricks

Scrolling Gradient

# July 13, 2018 By Chris Coyier

If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that.

But, what if you don't want a perfectly vertical gradient? Like you want just the top left corner to change color? Mike Riethmuller, re-using his own technique from the CSS-only scroll indicator (A-grade CSS trickery), did this by overlapping two gradients. The "top" one is fixed position and sort of leaves a hole that another taller gradient peeks through from below on scroll.

gradients

Drawing Images with CSS Gradients

# June 25, 2018 By Jon Kantner

What I mean by "CSS images" is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen used are tinkering with border radii, box shadows, and sometimes clip-path. You can find a lot of great examples if you search daily css images" on CodePen. I drew some myself, including this Infinity Gauntlet, but in one element with only backgrounds and minimal use of other properties.

Let’s take a look at how you can create CSS images that way yourself.

(more…)

1 Element CSS Rainbow Gradient Infinity

# June 5, 2018 By Ana Tudor

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let's see how I did that!

conic gradients css animation css variables custom properties gradients mask

Animated gif. We start with a grey background and we have an orange pie slice (circular sector) growing from nothing to covering everything around the central point. Then we have a grey pie slice growing from nothing to covering everything around the central point and we're back where we started from: a grey background.

The State of Changing Gradients with CSS Transitions and Animations

# June 1, 2018 By Ana Tudor

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future.

Sadly, six years have passed and nothing has changed in this department. Edge supports animating gradients with CSS, just like IE 10 did back then, but no other browser has added support for this. And while animating background-size or background-position or the opacity or rotation of a pseudo element layered on top can take us a long way in terms of achieving cool effects, these workarounds are still limited.

(more…)

css animation gradients keyframes transition

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.

conic gradients 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