SiteDesign Tools & Generators · CSS generators
Drag-and-drop clip-path editor supporting polygon, circle, ellipse and inset with live CSS output over your own image.
Why it’s a gem
Still the definitive clip-path tool over a decade later; endlessly cloned, never beaten.
Over six hundred loading animations, each built from a single div using only CSS and custom properties.
Twenty parameterised generators for CSS-only shapes, ribbons, tooltips, gradient shadows, section dividers and fancy borders.
Generator producing the soft multi-stop mesh gradients popularised by AI product marketing sites, exportable as CSS.
Browser generator that produces layered CSS for realistic glass refraction effects, exporting the rules straight into your stylesheet.
Drag-and-drop builder for CSS grid layouts with adjustable columns, rows and gaps that exports the resulting grid rules.
Interactive reference where every CSS selector is demonstrated live against a sample DOM you can modify.