CSS-ing Candy Ghost Buttons
Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have come up with and remake them with clean and …
Ana Tudor
on
Articles Tagged
gradients
23 Articles
Grainy Gradients
Browse through Dribbble or Behance, and you’ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers’ affinity for texture, …
Jimmy Chion
on
(Updated on )
Animating a CSS Gradient Border
This little trick for gradient borders is super useful:
.border-gradient {
border: 5px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}Here’s some basic demos from our article on the subject. Sephanie Eckles was sharing around the idea …
Shared by
Chris Coyier
on
No-Jank CSS Stripes
My mind goes immediately to repeating-linear-gradient and hard-stop gradients when thinking of creating stripes in CSS. You make one stripe by using the same color between two color stops, and another stripe (or more) but using a different color …
Chris Coyier
on
USA.css
Lots of fun with gradients from Bennett Feely: stars, stripes, banners, bursts… I love being able to use nice patterns with either no image requests at all, or very little SVG.
Reminder: Bennett does all sorts of cool stuff. …
Shared by
Chris Coyier
on
How-to guide for creating edge-to-edge color bars that work with a grid
Hard-stop gradients are one of my favorite CSS tricks. Here, Marcel Moreau combines that idea with CSS grid to solve an issue that’s otherwise a pain in the butt. Say you have like a 300px right sidebar on a desktop …
Shared by
Chris Coyier
on
When Sass and New CSS Features Collide
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny …
Ana Tudor
on
Direct link to the article Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis
Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis
You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed …
Preethi
on
Background Patterns, Simplified by Conic Gradients
For those who have missed the big news, Firefox now supports conic gradients!
Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true…
Ana Tudor
on
While You Weren’t Looking, CSS Gradients Got Better
One thing that caught my eye on the list of features for Lea Verou’s conic-gradient() polyfill was the last item:
…Supports double position syntax (two positions for the same color stop, as a shortcut for two consecutive color stops with
Ana Tudor
on
Nested Gradients with background-clip
I can’t say I use background-clip all that often. I’d wager it’s hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis, which coincidentally was itself a learning-response post to …
Chris Coyier
on
(Updated on )
Our Learning Partner
Frontend Masters
