Wensity

Animated background generator

224 backgrounds19 sectionsPNG, MP4 and React export

Background Studio is a free gradient and shader background generator that runs in your browser. Start from a finished look, recolour it, layer texture over it, and export an image, a video or a React component.

Open Background StudioFree tools

No account needed to design or download images.

Gem Smoke Fire, an animated background made in Background Studio
Gem Smoke FireOpen in studio

A shader background editor that runs in your browser

Background Studio is a browser-based editor for animated gradient and shader backgrounds, made by Wensity. Pick a look from the Library, change its colours, motion and layers on a live canvas, and export it for a website, an app or a launch video.

Everything renders on your device's graphics card. There is no upload, no render queue and nothing to install, and the same engine draws the preview and the export.

Background Studio with Gem Smoke Fire on the canvas, the Library of looks on the left and presets, logo and colour palettes on the right
Gem Smoke Fire in the editor. The Library is on the left, the live canvas in the middle, and the look's presets, logo and colours on the right.

224 backgrounds

19 sections, from soft gradients and mesh fields to glass, halftone and liquid metal.

12 layers

Stack a base, texture and effects in one design. Each layer keeps its own controls.

Any size

16:9, 4:3, 1:1, 4:5, 9:16 and 21:9 presets, or any custom size from 64 to 4096 px.

From preset to exported background in 30 seconds

Every design starts from a finished look instead of a blank canvas. Open one, make it yours, and download it.

Heatmap opened from the Library, given a pink tone in one click, and exported as a video. The glow follows the Wensity mark, and you can swap in your own logo.

1. Pick a look

Browse the Library by section, or search for a look by name.

2. Make it yours

Recolour it in one click, shuffle it, or open any of its controls.

3. Export

Download a PNG, JPG, WebP or video, or copy it as a React component.

Recolour any background in one click

Colour variants recolour the whole design at once, and every option previews as a real render of your background.

Five palettes on a static mesh gradient, one click each.

Roles kept

A dark base stays dark and a highlight stays bright, so a variant never breaks the design.

Real previews

Each choice is rendered from your design, not shown as a strip of swatches.

Original first

The look you started from is always the first option, and exact colour fields sit below.

Layer grain, halftone and glass over any gradient

Texture is a section you switch on over the base, not a different preset, so the colours underneath stay as they were.

Orchid Dusk with grain switched on, then a halftone screen over it.

Add grain to a gradient, put a halftone screen or fluted glass over it, or bend it with a distortion. A design holds up to 12 layers, and each one keeps its own controls, so you can tune the grain without touching the gradient below it.

Build a mesh gradient point by point

Drag colour points across the canvas and the mesh blends between them.

Dragging, adding and recolouring points in the free Mesh Gradient Generator.

Add a point where you want more colour, change its hue, and move it until the field sits right behind your content. Points are the base of the free Mesh Gradient Generator, and the same Points base is in the studio, where grain, glass or halftone can go on top of it.

Turn any photo into halftone art

Upload a photo, set the dot size and ink colours, and compare it with the original as you go. Your photo never leaves the browser.

The free Halftone Generator, with the original on one side and the halftone on the other, then a new ink colour.

Halftone · 17

Dot screens over a photo or over an animated base.

Dither · 12

Ordered and pixel dither looks for a print or retro screen finish.

ASCII · 10

Images drawn in characters, for a terminal or zine feel.

Interactive backgrounds that follow the cursor

The Interactive section has 6 looks that react to the pointer: liquid that parts where the cursor passes, and ripples that spread out from it.

The cursor moving over two looks from the Interactive section.

They suit a hero or a sign-in page, where a visitor's first movement gets a response. A video export plays the look on its own, without cursor input.

Export PNG, MP4 video or a React component

Every format a site or launch needs, rendered on your device. No watermark.

  • Images: PNG, JPG or WebP, up to 4096 px.
  • Video: MP4, HEVC or WebM, up to 4K at 60 fps.
  • React: one .tsx file that renders the shader live.
  • Link: share or reopen any design.

Images and links are free. Video, React and 2x PNG come with Wensity Pro, $169/year or $199 once. See pricing.

Metaballs Solar rendered to MP4, frame by frame, in the browser.
Copy React puts the background on your clipboard as a component.

224 backgrounds ready to remix

A few of the looks in the Library's 19 sections, each exported from the studio. Open any of them and it loads in the editor, ready to change.

Backgrounds for websites, launches and social posts

Choose 16:9, 4:3, 1:1, 4:5, 9:16 or 21:9, or type any size from 64 to 4096 px. These are plain exports from the studio, with type added on top.

yourproduct.com
The Midnight Diagonal background from Background Studio behind a sample website headline

Your headline over a background that moves

Get started
Website hero, 16:9Midnight Diagonal
The Cloud Sky background from Background Studio as a phone lock screen wallpaper

Saturday 18 October

9:41

Phone wallpaper, 9:16Cloud Sky
wensity
The 1960s Teal background from Background Studio in a sample social media post

Autumn drop

New season, new colours

wensity.com

wensity The autumn palette is live.

Social post, 4:51960s Teal

Introducing

Version 2.0

Launch video, 16:9Neuro Noise

Free gradient, mesh, noise and halftone generators

Four focused generators built on the same engine. Their CSS, SVG and image exports are free, and each one opens in the full studio when you need more.

  • A blue linear gradient made in the CSS Gradient Generator

    CSS Gradient Generator

    Layer linear, radial and conic gradients, then copy the CSS.

  • An orange swirl mesh gradient made in the Mesh Gradient Generator

    Mesh Gradient Generator

    Drag colour points into a soft mesh, animate it, export it.

  • A creased paper texture made in the Noise Texture Generator

    Noise Texture Generator

    Grain, fractal and cell noise as textures or a CSS grain overlay.

  • A photo of a hiker turned to black and white halftone in the Halftone Generator

    Halftone Generator

    Turn any image into halftone dots, screens or CMYK print.

Background Studio questions, answered

What people ask before they open the studio: what it costs, what it exports, and where designs are saved.

Background Studio is a free, browser-based animated background generator made by Wensity. You start from one of 224 gradient, shader and texture backgrounds, change its colours, layers and motion on a live canvas, and export it as a PNG, JPG or WebP image, an MP4 or WebM video, or a React component.

Yes. Every look and every control is free, and so are images at the canvas size, the design file and share links. No account is needed. Wensity Pro adds PNG at 2x, video export and React code. It is the same license that unlocks every Pro Wensity component and block: $169 a year, or $199 once.

Export it as a video and set it as a muted, looping, autoplaying background video, or export it as a React component. The component is one .tsx file that renders the same shader live and needs a single npm package, which is named in a comment at the top of the file. A still image export works anywhere a CSS background image does.

MP4 with H.264, HEVC, or WebM, at the canvas size or 1080p, 1440p or 4K, at 24, 30 or 60 frames per second, from 5 to 60 seconds long. Each frame is rendered at the chosen size rather than scaled up from the preview. Video export uses the browser's built-in encoder, available in Chromium browsers such as Chrome and Edge, and in Safari.

There are presets for 16:9, 4:3, 1:1, 4:5, 9:16 and 21:9, and any custom size from 64 to 4096 pixels on a side. A design keeps its look when you change the ratio, so one background can be exported for a website hero, a social post and a phone wallpaper.

Yes. Logo looks such as Liquid Metal, Gem Smoke and Heatmap wrap their effect around a mark you choose or upload, and image looks such as halftone, dither and ASCII work on any photo you upload. Uploads stay in your browser: they are not sent to Wensity and are not saved with your local edits.

In your browser. The studio remembers your edits to each look and the design you were last working on, and Saved keeps projects you name. To move a design to another device, copy its share link or download the design file.

Yes. On a phone the editor switches to a compact layout with the canvas on top and a Presets and Edit switch below. Library search and Saved projects are desktop only, and the full workspace is easiest on a laptop or desktop screen.

Parth

Founder, Wensity

Still have a question?

Ask about plans, licensing, or templates and you will hear back from me directly.

Email hey@wensity.com

Keep building with Wensity