Articles Tagged gradients

Came across this thread:

CSS superfriends! Have you seen examples of how to do multi-line padded text like this article on @css (https://t.co/2j8p4jmaT4), but with a gradient that doesn't reset for each line? pic.twitter.com/MVPdAjxt1W

— Dan Mall (@danmall) December 3, 2018

My first thought process was:

• The lines are padded, and that's tricky enough to pull off.
• box-decoration-break is probably our friend here.

But it turns out we need a litttttle extra trickery to make it happen.… Read article

Let's say you need a gradient border around an element. My mind goes like this:

• There is no simple obvious CSS API for this.
• I'll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of padding around it.

Perhaps like this… Read article

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 … Read article

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!

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 … Read article

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, … Read article

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! … Read article

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.… Read article

When I create filters, shadows, transformations or gradient backgrounds in CSS, it feels amazing. Who would have thought CSS would come this far. No need to use images for any of that stuff. I can almost hear the browser telling me "don't worry, I do it for you."

Despite all this evolution, CSS still has limitations. For instance, background gradients can only be created in linear or radial styles, but not a conical shape.… Read article