Wensity

Backgrounds, from editor to your app.

Background Studio is Wensity's editor for animated gradient, shader and texture backgrounds. It runs in your browser with no install and no account. This guide covers what you can export, what is free, and how to drop an exported background into a React or Next.js project.

What it is

Start from a look

Pick a background from the Library, or press Shuffle for a surprise. Every look is free to open and change.

Make it yours

Change the colors, add your logo to the looks that take one, and stack grain, halftone or glass layers on top.

Any size

Choose 16:9, 4:3, 1:1, 4:5, 9:16 or 21:9, or set your own width and height up to 4096 pixels.

Export

Download an image or a video, or copy a React component that renders the same background live.

Free vs Pro

You can design, save and share without paying anything. Pro adds the exports that cost the most to make.

ExportFreePro
PNG, JPG or WebP at canvas sizeYesYes
PNG at 2xNoYes
Video (MP4, HEVC or WebM)NoYes
React component (.tsx)NoYes
Design file and share linkYesYes

Pro is the same plan that unlocks premium components and blocks, so one purchase covers both. See pricing for the yearly and lifetime options.

Use your exports anywhere

Images, videos and code you export are yours to use in personal, commercial and client work, on any plan, with no credit required. Selling them on their own as stock media or background packs is not allowed. The license has the full terms.

Export images and video

Open Export in the top right of the editor. Images come out at the size of your canvas, and Pro adds a PNG at twice that size for sharp results on high resolution screens.

For video, pick a resolution (canvas size, 1080p, 1440p or 4K), a frame rate of 24, 30 or 60 fps, a length from 5 to 60 seconds, a format and a quality. The video renders on your own device, so longer and larger videos take more time. Some resolutions or formats are greyed out when your browser cannot record them.

Use the React code

Copy React puts a complete, typed component on your clipboard, and Export can save the same code as a .tsx file. The comment at the top of the file names the one npm package it needs, either shaders or @paper-design/shaders-react, pinned to the exact version the studio used. Install that package first. For most looks it is:

terminal
pnpm add shaders@4.0.4

and for Paper looks it is @paper-design/shaders-react@0.0.81.

Then add the file to your project and render it inside an element with position: relative. The background fills that element:

Source
import Background from "@/components/background";


export function Hero() {
  return (
    <section className="relative min-h-[80vh] overflow-hidden">
      <Background />
      <div className="relative z-10">Your headline here</div>
    </section>
  );
}

The component accepts className and style, starts with "use client" so it works in the Next.js App Router, and is hidden from screen readers because it is decoration. It renders live in the browser, so it animates exactly like the preview.

Save and share

The studio keeps the design you are working on in your browser, so it is still there when you come back. Use Saved to keep designs you like, the design file (.json) to back one up, and Share link to send someone a URL that opens your exact design. Photos and logos you upload stay on your device and are never sent to Wensity, so share links never include them.

The free tools

The four free design tools use the same engine for one job each: the CSS Gradient Generator, Mesh Gradient Generator, Noise Texture Generator and Halftone Generator. Their CSS, SVG and canvas-size image exports are free. Every tool has an Open in full studio button that carries your design into Background Studio when you want layers, motion or video.

Open Background StudioSee the free tools