Generators

Pick a generator, press Space and enjoy the surprise.

Patterns (5 generators)

Repeatable patterns made of dots, lines and shapes for websites, slides and print.

Polka Dots
Dot patterns on a grid, offset or freely scattered. Export as SVG or image.
Open in editor
Seamless Patterns
Seamlessly tiling patterns made of shapes or your own graphic. Export as SVG, CSS, tile or image.
Open in editor
Grid Patterns
Grid lines, dot grids, crosses or tiles with major and minor grids. Export as SVG or image.
Open in editor
Confetti
Confetti made of strips, circles, triangles and squiggles, evenly spread. Export as SVG or image.
Open in editor
Dieter Dots
Concentric rings of dots, like a perforated speaker grille. Export as SVG or image.
Open in editor

Patterns and gradients the browser draws itself. Copy the CSS, no image file needed.

CSS Patterns
Over 30 pure CSS patterns: dots, grids, stripes, waves and geometric shapes. Export as CSS, Tailwind, SVG or image.
Open in editor

Smooth color transitions for backgrounds, buttons and hero images.

CSS Gradient
Linear, radial and conic gradients with smooth OKLCH transitions. Export as CSS, SVG or image.
Open in editor
Mesh Gradient
Soft, flowing color gradients from several blurred color fields. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor
Blurry Gradient
Dreamy backgrounds from large, strongly blurred color circles. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor
Striped Gradient
Vertical stripes, each with its own gradient, slightly offset against each other. Export as PNG, JPG, WebP, SVG or CSS.
Open in editor

Surfaces, shapes and textures that frame websites, slides and social posts.

Blob Generator
Organic shapes in one click, filled, outlined or with a gradient. Export as SVG or image.
Open in editor
SVG Waves
Layered waves for sections, headers and backgrounds. Export as SVG, CSS or image.
Open in editor
Blob Composition
Several blobs at corners and edges that adapt to any canvas size. Export as SVG or image.
Open in editor
Doodle Backgrounds
Hand-drawn looking squiggles, spirals, stars and zigzags as a background. Export as SVG or image.
Open in editor
SVG Charts
Placeholder charts with random data for mockups: lines, areas and bars. Export as SVG or image.
Open in editor
Starry Sky
A starry night sky with a color gradient, twinkling stars and sparkles. Export as SVG or image.
Open in editor

Grain, halftone and other effects for surfaces and images.

Noise and Grain
Grainy textures and backgrounds with fine noise over a color or gradient. Export as PNG, JPG, WebP or SVG.
Open in editor

Palettes, tints and color scales that stay readable and fit your design system.

Color Palette Generator
Harmonious color palettes at the press of the space bar. Lock colors, pick a harmony, check contrast and export as CSS.
Open in editor
Tints & Shades
Lighter and darker steps of a color. Export as HEX, RGB, HSL or CSS variables.
Open in editor
Tailwind Color Palette
The eleven Tailwind steps 50 to 950 from one color. Export for tailwind.config.js, @theme, OKLCH and HEX.
Open in editor
Palette from Image
Drop in a photo and get its main colors with their share in percent. The image stays in your browser.
Open in editor

Convert code and images, right in your browser.