#tinyCSStip `clip-path` or `mask` are applied after `filter`.

This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.

We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.

https://codepen.io/thebabydino/pen/BRROzw

Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR

A little spinner I made years ago on @codepen but never shared publicly https://codepen.io/thebabydino/pen/OJQKbKW

Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.

As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.

#tinyCSStip

Ever want to mask something out of an element, but not cut out blur or box-shadow or a pseudo outside the element's border box?

Well, subtract whatever you want masked out from a fully opaque layer with `mask-clip` set to `no-clip`!

mask:
conic-gradient(red 0 0) no-clip subtract,
var(--masked-area)

@codepen demo: https://codepen.io/thebabydino/pen/MYggKre

Someone hearted a Pen I made over a year ago, a no library, minimal JS version of another I found on @codepen.

At the time, it didn't work in Firefox as it was transitioning custom properties and support for :has() there was spotty.

Now it's cross-browser codepen.io/thebabydino/pen/gOqYdJd

I made this over 6 years ago: hand-drawn-like image border with #SVG filters codepen.io/thebabydino/pen/PyXoMW

I had no idea what I was doing back then, so I'm surprised I don't hate the code. Though some things I surely wouldn't do the same way.

Something I made over half a decade ago on @codepen: single element pure #CSS border patterns!

Cover method (only allows opaque background + hacky transparency emulations) https://codepen.io/thebabydino/pen/LaxmKO

Masking method (allows transparency) https://codepen.io/thebabydino/pen/pYrQYN

Patterns from the CSS3 Pattern gallery by @leaverou: https://projects.verou.me/css3patterns/
(with gradient code made a bit more modern)

Over a decade ago, I made this single div tooltip on @codepen, but things have changed for the better on the web since, so here's an improved 2024 version https://codepen.io/thebabydino/pen/ALREmx

Instead of aligning gradients of div & its pseudos, it's using #CSS #masking and a simple #SVG #filter.

Simplest gradient border buttons (with border-radius) https://codepen.io/thebabydino/pen/vYoJqBK

Multiple cases, each just a few lines of code:
solid background
(semi)transparent background
(semi)transparent background for input[type=button] (so no pseudos allowed)

Find it mind-boggling anyone could find something so simple mind-boggling (I'm also bored of this kind of thing since I've coded it way too many times over the past 7 years), but here's a faded progress ring in under 20 heavily commented #CSS declarations on @codepen:
https://codepen.io/thebabydino/pen/vYomEaO?editors=0100

#tinyCSStip Know when you set a background gradient or a gradient mask and you get an ugly banding effect?

Tons of questions asked about this - the advice always is noise/ grain/ dither.

https://graphicdesign.stackexchange.com/q/8108/199818

That's a simple #SVG filter, but did you know you should be able to apply it to a #CSS gradient?

Help an idiot with #CSS masking?

https://stackoverflow.com/q/78924192/1397351

How the hairy heck does `luminance` masking work when I have multiple gradient layers?

#tinyCSStip Use case for CSS mathematical functions.

`round()` edition: size box so that it contains the background pattern size an integer number of times plus half https://codepen.io/thebabydino/pen/yLWvKyK?editors=1100

No text duplication layered 3D effect with SVG filter magic

Live on @codepen :

https://codepen.io/thebabydino/pen/LYvQzve
https://codepen.io/thebabydino/pen/vYMdzVy

#CodePenChallenge

In Bucharest, there used to be a cake shop called Candy Cat (logo below). More recently, there's a candy store (last image).

3D + multilayer + other effects (halftone, inner shadow) with no text duplication, just some SVG filter magic

Live on @codepen:

https://codepen.io/thebabydino/pen/abMvzoo
https://codepen.io/thebabydino/pen/PoLGEPM
https://codepen.io/thebabydino/pen/LYvzmLW
https://codepen.io/thebabydino/pen/PogJybr