Archive for the ‘gradients’ Category

Transitioning Gradients

Posted on: No Comments
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...

Easing Linear Gradients

Posted on: No Comments
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! Here's an exam...

A Thing To Know about Gradients and “Transparent Black”

Posted on: No Comments
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. In Chrome (also Android), Fi...