The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

01 / 15

Rotating Glow Border with @property

A conic gradient can start at any angle, and until that angle is a registered custom property the browser refuses to interpolate it — so the border jumps instead of sweeping. Declare it with @property and one spinning gradient serves a card, an avatar ring and a button, each changing only its palette, speed and direction. The halo is the same gradient again, blurred behind the edge. Worth knowing: inherits is a required descriptor, not an optional one. Leave it out and the whole rule is invalid, --a never registers, and every gradient silently computes to none.

animationcssui/uxgradientconic-gradient@property

02 / 15

Two-Handle Price Filter From Real Inputs

Every shop has a two-handle price filter and no HTML element does it, so people reach for a slider library or fake the whole thing with divs — and throw away keyboard support on the way. Stack two real range inputs on one track instead. pointer-events: none lets a click fall straight through the invisible tracks, pointer-events: auto on the thumbs keeps each one grabbable, and that pair is the entire trick: arrow keys, Home/End, Tab focus and aria all still work. One fill div reads both values, each input clamps against the other so the handles cannot cross, and the higher one sits on top or its thumb goes unreachable at the far end.

cssaccessibilityui/uxformsjavascriptrange

03 / 15

Drag-to-Reorder That Opens a Gap

What sells a sortable list is not the row you are holding — it is what the other rows do. Swap them the instant you cross a boundary and the list flickers; instead, every row past the drop target shifts by exactly one row height, and the gap that opens up is the drop indicator. Two details carry it: transform rather than top or margin, so the shift stays composited at fifty rows, and a short transition, because anything over about 0.2s lags behind your finger and reads worse than no animation at all.

animationcssui/uxjavascriptinteractiondrag and drop

04 / 15

Block Text Selection with user-select

One declaration decides whether a pointer drag paints a text selection or does what your UI meant it to do. user-select: none is what keeps a drag handle, a reorderable row or a game surface from turning into a highlighted mess halfway through the gesture. The lock here is a checkbox and :has(), so switching it is pure CSS — try selecting the text in both states.

cssui/uxinteractionuser-select:has()

05 / 15

Swipeable Card Stack with Depth Effect

Recreates a satisfying swipeable card stack interaction where the top card is flung away, revealing the next card which smoothly rises into position with a depth effect. Utilizes CSS transforms for scaling, translation, and rotation, managed by JavaScript for interaction.

animationui/uxinteractiontransformscss variablescard stack

06 / 15

Zebra Stripe Table with Hover Highlight

Achieve elegant, instantly readable data tables with automatic zebra striping using CSS `nth-child(even)` and a subtle hover highlight. No manual row classes are needed, ensuring the pattern remains correct even when data changes.

cssui/uxhovertablezebra stripingnth-child

07 / 15

Button Hierarchy for Clear CTAs

This technique establishes visual hierarchy among multiple buttons using filled, outlined, and ghost styles. It guides the user's eye to the most important action by designating only one primary (filled) button per view.

cssui/uxhierarchydesignbuttoncall-to-action

08 / 15

Pure CSS Frosted Glass Effect

A translucent panel demonstrating the 'glassmorphism' effect by blurring and saturating the live content behind it using CSS backdrop-filter.

animationcssui/uxglassmorphismblurbackdrop-filter

09 / 15

Light-Catching Card Edges

Transform a flat bordered card into a premium, three-dimensional element by faking light interaction, using an inset highlight and layered drop shadows instead of a simple outline.

cssui/uxdesignbox-shadowborder3d effect

10 / 15

Gradient Banding Fix with Noise

This technique prevents undesirable 'banding' in smooth gradients by layering a subtle noise texture over them. The noise, blended with the gradient using `background-blend-mode: overlay`, introduces tiny variations that trick the eye into perceiving a continuous, smoother transition, resulting in a more premium and refined look.

animationcssui/uxgradientnoisedithering

11 / 15

Consistent Column Alignment

This snippet demonstrates how inconsistent left alignment of content within a secondary column (e.g., values next to labels) can make a UI element appear unprofessional. Toggling the effect shows how applying a single, shared margin or padding for the second column creates a clean, intentional, and polished look.

cssspacinglayoutdesign-principlesui/uxalignmentclick

12 / 15

Designed Empty State Inbox

Transforms a bland 'no items' empty state into a welcoming screen with a stylized illustration, friendly microcopy, and a clear call-to-action button, ensuring the user always feels cared for, not lost.

dark modeui/uxbuttonsmicrocopyillustrationempty state