Free CSS and design generators

• Mesh gradient generator for CSS and React

  Build a soft mesh gradient background from layered radial gradients and export it as CSS, Tailwind or a React component.

• CSS gradient generator: linear, radial and conic layers

  Compose layered linear, radial and conic gradients with OKLCH colour stops and export CSS, a Tailwind v4 token or a React surface.

• Shader background generator (WebGL mesh gradient)

  Design an animated WebGL mesh gradient background with grain and swirl and export it as a self-contained React component.

• CSS clip-path generator for polygons, circles and insets

  Edit clip-path shapes visually with draggable points and export CSS, an SVG clipPath, a Tailwind class or a React component.

• Blob border-radius generator (CSS blob shapes)

  Shape an organic blob with draggable border-radius handles and export the eight-value border-radius, an SVG path or a React component.

• CSS keyframes animation generator

  Build a CSS @keyframes animation on a timeline, preview it live and export CSS, a Tailwind v4 animate token or Motion variants.

• CSS loader and spinner generator

  Pick a ring, dots, bars, pulse or orbit loader, set size, colour and speed, and export CSS or a React component.

• Color palette scale generator (50 to 950, OKLCH)

  Generate a 50 to 950 OKLCH colour scale from one brand colour, with light and dark shadcn tokens and a WCAG contrast report.

• Neumorphism and claymorphism CSS generator

  Generate soft UI neumorphism and claymorphism surfaces with light angle, depth and intensity, and export CSS, tokens or Tailwind.

• SVG background pattern generator (dots, grids, lines)

  Create seamless SVG background patterns, such as dot grids and lines, and export a data URI, a CSS class, Tailwind or a React component.

• SVG wave and section divider generator

  Generate layered SVG section dividers (waves, peaks, steps, low-poly) and export SVG or a React component.

• OG image and favicon generator for Next.js

  Design a 1200x630 Open Graph image and a favicon set, and export PNG, SVG and the Next.js ImageResponse files.

• shadcn/ui theme generator

  Pick a preset or design a theme, watch real apps change live in light and dark, then copy the CLI command.

The generators are components of Agentic UI Kit. The kit installs them, and everything else it ships, as source in your project.