Imperator Design
Library
Categories
Showcase
A living library of web craft

Imperial Web Tricks

Imperator Design is a curated canvas of modern CSS, JavaScript and layout techniques. Copy the code, watch it run, ship it today.

Open librarySee it in motion
149Tricks
311Tags
100%Copy-paste
The library

Techniques, not templates

Each entry is a self-contained, production-ready trick recreated from the source video. Click one to watch it run.

001 / 149

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
002 / 149

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
003 / 149

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
004 / 149

Even Flex Lines with flex-wrap: balance

Greedy wrapping fills the first line and strands whatever is left, which is how a four-item nav ends up three across with one alone underneath. flex-wrap: balance asks the browser to spread the items evenly over the lines it needs instead — four items become two and two. Drag the panel's right edge to move the wrap point and watch the two lists disagree. Chrome 150 is the first to ship it, so the balanced list falls back to wrap elsewhere and says so.

csslayoutflexboxprogressive enhancementflex-wrap
005 / 149

Fade-Up Scroll Reveal with view()

A reveal that needs no observer and no scroll listener. animation-timeline: view() hands an ordinary @keyframes block a timeline built from the element's own visibility, so each card fades and rises as it enters the scrollport. animation-range: entry ends that timeline once the card is in, and `both` keeps the finished state instead of playing it backwards on the way out.

cssrevealanimation-timelinescroll-driven animationview()
006 / 149

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()
008 / 149

Blend Any Two Colours with color-mix()

Mixing two colours used to mean a preprocessor function or hand-computed hex values. color-mix() does it in the browser: name a colour space, two colours, and how much of the first one you want. Drag the slider and watch the result bar and the declaration change together — the bar's background is the very color-mix() call printed underneath it.

csscolorcolor-mixinteractionslider
009 / 149

Dark Mode in Two Lines of CSS

No theme classes, no localStorage, no toggle wired to a click handler. color-scheme: light dark tells the browser this page renders either way, and light-dark() picks the right value per property — so the page follows the operating system on its own. The demo flips the container's own color-scheme so you can watch both halves without touching system settings.

cssdark modethemingcolor-schemelight-dark
010 / 149

Clamp a Paragraph to N Lines

Cutting a preview to a fixed number of lines used to mean measuring text and slicing strings. Three declarations do it instead: display: -webkit-box with a vertical box-orient lets -webkit-line-clamp cut at whatever line you name, and the browser adds the ellipsis. The line count here is a custom property, so the same rule serves every card.

csstypographytexttruncationline-clamp
011 / 149

Native Popover Dialog, No Library

A button with popovertarget and an element with popover is the whole implementation. The browser puts it in the top layer, closes it on Escape, closes it when you click outside, and hands you ::backdrop to style — none of which you wrote. The script here only opens it on a loop so the demo plays; the open and close buttons are pure markup.

popoverdialogmodalhtmltop layerno javascript
All 149 tricks
Browse by category

Find the move you need

Every trick, filed by the craft it demonstrates. CSS, motion, layout and more. Choose a category to jump straight to what fits.

css120
animation85
javascript33
layout23
accessibility17
forms15
hover15
ui/ux15
input13
All categories
Your next trick awaits

Steal like a professional

Self-contained HTML, CSS and JS, written to be copied and pasted straight into your own project.

Open showcase