SVG
Liquid Glass on the Web
It’s a complicated look! There may or may not be blurring, light refracts in tricky ways, the highlights are quite bright, and you’ve got to be very careful about text contrast accessibility.
Step Gradients with a Given Number of Steps
A deep dive into producing an interpolated “gradient” of colors from just two provided colors.
Grainy Gradients
This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.
SVG to shape()
We’ve been trying to make the point around here that the new shape() in CSS is awesome. It’s the powerful <path> in SVG ported to CSS so it can use actual units. It’s probably how path() should have ported to begin with, but c’est la vie. I’ll make the point in this demo. Resize those […]
Layered Text Headers
Being able to control the `paint-order` in CSS means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability.
A Deep Dive into the Inline Background Overlap Problem
`box-decoration-break: clone;` in CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated.
Mesh Gradient Generator
A nice tool for generating mesh gradients from Erik D. Kennedy. You might call it a bit of a trend, but as Erik pointed out in a recent newsletter, they can be quite versatile because it’s just a nice background look that doesn’t demand anything in particular from the brand.
Gradient Text with a Drop Shadow
Gradient text is pretty easy to do these days with `background-clip: text;` — but it kills your ability to use `text-shadow`. SVG to the rescue.
Split Effects with no Content Duplication
The `clip-path` property with the `inset()` shape makes for some cool design opportunities. Here we’ll expand on some existing ideas, improving them by not requiring any content duplication.