Temani Afif

Converts an SVG path into an equivalent CSS clip-path or mask so shapes stay resolution-independent.

Animated variants of the css-pattern collection: moving CSS-gradient backgrounds with no JS or images.

157 background patterns built entirely from CSS gradients, each parameterised with custom properties for size and colour.

Produces ornamental CSS frames around images using masks and gradients instead of images.

Generates CSS-only section dividers — waves, zigzags, arrows — that scale without image assets.

Generates CSS-only decorative borders — corner brackets, partial frames and offset outlines — with no extra markup.

Generates CSS ribbon and banner shapes for badges and callouts using single-element techniques.

Builds tunable wavy edge dividers in pure CSS with amplitude and frequency controls.

Generates notched, scooped and cut-corner CSS shapes on a single element, without pseudo-element hacks or image assets.

Generates organic blob shapes as CSS border-radius or clip-path values, so blobs stay resolution-independent and animatable.

Generates speech-bubble and tooltip shapes with arbitrary tail position and border in pure CSS.

Serves a random single-element CSS loader on each visit as a browsing interface into the 600-loader set.

Generates starburst and sunburst CSS shapes with adjustable spike count and depth.

Generates multi-colour gradient box-shadows in pure CSS with live preview and copyable output.

Over six hundred loading animations, each built from a single div using only CSS and custom properties.

Serves a random modern-CSS technique with runnable demo, as a daily learning surface.

Archive of three hundred plus short, demo-backed tips on modern CSS including masks, gradients, has() and scroll timelines.

Twenty parameterised generators for CSS-only shapes, ribbons, tooltips, gradient shadows, section dividers and fancy borders.