Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
gradients

40 Articles
{
,

}
Direct link to the article Different Ways to Get CSS Gradient Shadows
box-shadow gradients shadow

Different Ways to Get CSS Gradient Shadows

It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does this (believe me, I’ve looked) and any blog post you find about …

Avatar of Temani Afif
Temani Afif on Feb 10, 2023
Direct link to the article A Fancy Hover Effect For Your Avatar
gradients hover mask scale

A Fancy Hover Effect For Your Avatar

Do you know that kind of effect where someone’s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while popping out of a series of red rings is the perfect example, and …

Avatar of Temani Afif
Temani Afif on Feb 3, 2023
Direct link to the article Animated Background Stripes That Transition on Hover
gradients mix-blend-mode multiple backgrounds transition

Animated Background Stripes That Transition on Hover

How often to do you reach for the CSS background-size property? If you’re like me — and probably lots of other front-end folks — then it’s usually when you background-size: cover an image to fill the space of an entire …

Avatar of Preethi
Preethi on Dec 8, 2022
Direct link to the article Making Static Noise From a Weird CSS Gradient Bug
background-clip conic gradients gradients mix-blend-mode radial-gradient

Making Static Noise From a Weird CSS Gradient Bug

What I will be doing here is kind of an experiment to explore tricks that leverage a bug with the way CSS gradients handle sub-pixel rendering to create a static noise effect — like you might see on a TV with no signal.
Avatar of Temani Afif
Temani Afif on Nov 18, 2022
Direct link to the article Some Links About CSS Gradients
conic gradients gradients linear-gradient radial-gradient

Some Links About CSS Gradients

Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it’s like the saved articles in my bookmarks folder are having a conversation. The conversation sitting in there now is all about CSS Gradients …

Avatar of Geoff Graham
Geoff Graham on Nov 2, 2022
Direct link to the article Fancy Image Decorations: Outlines and Complex Animations
clip-path gradients hover mask outline transition

Fancy Image Decorations: Outlines and Complex Animations

We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img> element. In this third and final piece, we are going to explore more techniques using the …

Avatar of Temani Afif
Temani Afif on Oct 28, 2022 (Updated on Jun 19, 2023)
Direct link to the article Fancy Image Decorations: Masks and Advanced Hover Effects
clip-path gradients hover linear-gradient mask radial-gradient

Fancy Image Decorations: Masks and Advanced Hover Effects

Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time to digest Part 1 because we will continue working with a lot of gradients …

Avatar of Temani Afif
Temani Afif on Oct 21, 2022 (Updated on Oct 28, 2022)
Direct link to the article CSS Checkerboard Background… But With Rounded Corners and Hover Styles
background gradients patterns repeating gradient

CSS Checkerboard Background… But With Rounded Corners and Hover Styles

On one hand, creating simple checkered backgrounds with CSS is easy. On the other hand, though, unless we are one of the CSS-gradient-ninjas, we are kind of stuck with basic patterns.

At least that’s what I thought while staring at …

Avatar of Preethi
Preethi on Sep 20, 2022
Direct link to the article Making a Real-Time Clock With a Conic Gradient Face
conic gradients custom properties dates gradients

Making a Real-Time Clock With a Conic Gradient Face

Gradients have been a part of the CSS spectrum for quite some time now. We see a lot of radial and linear gradients in a lot of projects, but there is one type of gradient that seems to be a …

Avatar of Brecht De Ruyte
Brecht De Ruyte on Sep 19, 2022
Direct link to the article Single Element Loaders: Going 3D!
3d clip-path gradients loader mask

Single Element Loaders: Going 3D!

For this fourth and final article of our little series on single-element loaders, we are going to explore 3D patterns. When creating a 3D element, it’s hard to imagine that just one HTML element is enough to simulate something like all six faces of a cube. But  maybe we can get away …

Avatar of Temani Afif
Temani Afif on Jul 1, 2022 (Updated on Aug 27, 2023)
Direct link to the article Single Element Loaders: The Bars
css animation gradients loader pseudo elements transform

Single Element Loaders: The Bars

We’ve looked at spinners. We’ve looked at dots. Now we’re going to tackle another common pattern for loaders: bars. And we’re going to do the same thing in this third article of the series as we have the others …

Avatar of Temani Afif
Temani Afif on Jun 24, 2022 (Updated on Aug 27, 2023)
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top