Backgrounds: how it works

A practical guide with real examples

PT

How to create gradient, texture and moving backgrounds, copy the CSS and record video

A good background changes the look of a website, a presentation, a video or a post. This guide shows how to build backgrounds with colors, gradients and textures, how to use the animated textures and record them as video, how to take the result to your project as an image or as ready-made CSS, and how to send the background to Video Editing and to the Clock.

Guide written by Marcelo Amantino · updated on October 19, 2026 · about us

Open Backgrounds

Where your data is processed

This tool runs entirely in your browser: your files and data are not sent to any WebFaz server.

The background is generated in your browser from the colors and shapes you choose; nothing is sent to WebFaz. The backgrounds you save in “My backgrounds” stay in this browser. Since the result comes from your choices, the background is yours to use.

See the full list on the Privacy page.

Real-world use cases

Create a gradient for the top of a website and copy the CSS

Situation: You want a soft, modern background for a website’s main section, without depending on a heavy image.

  1. Open the “Gradient” tab, choose the type and set the colors. The gradient can use two or three colors, or start from one of the ready-made palettes.
  2. Adjust the angle, scale and origin (you can drag the origin right on the preview) and follow the result in real time.
  3. Click “Copy CSS” and paste the code into your element’s selector: it carries colors, gradient and texture embedded.
  4. Test the contrast of the text that will sit on top.
Backgrounds on the Gradient tab: gradient type, angle, scale, origin, the gradient colors, the ready-made palettes and the live preview.
Gradient: type, angle, colors and ready-made palettes.
  1. Point 1: Choose the gradient type (linear, radial and others).
  2. Point 2: Adjust the angle, the scale and the origin of the gradient. You can also drag on the preview to move the origin.
  3. Point 3: Set each color. The gradient can have two or three colors (use Use 2 colors or Use 3 colors).
  4. Point 4: Or start from a ready-made palette.
Backgrounds with the CSS area of the full composition open, showing the background-image code ready to paste, and the Hide CSS button.
CSS ready to paste into your site.
  1. Point 1: Copy CSS shows the code of the full composition (colors, gradient and texture).
  2. Point 2: Paste it into your element’s selector: the background is identical to the preview, with no image file needed.

Result: A light CSS background that scales to any screen with no image file.

Add texture to a background

Situation: A flat color looks dull and you want a bit of subtle texture.

  1. Open the “Textures” tab and choose the background under the texture (solid color or gradient).
  2. In “Texture style”, choose a style (polygons, shapes, waves, grid and others).
  3. Adjust density and opacity until the texture is discreet and choose the blend mode. “Generate new texture” creates another variation.
Backgrounds on the Textures tab: the background under the texture, the texture style, the density, the opacity, the blend mode and the Generate new texture button, with the live preview.
Textures: style, density, opacity and blend.
  1. Point 1: Choose the texture style (polygons, shapes and others). It sits over the chosen background.
  2. Point 2: Density and opacity control how much of the texture shows.
  3. Point 3: The blend mode (normal, overlay, multiply…) changes how the texture combines with the colors.
  4. Point 4: Generate new texture creates another variation of the same style.

Result: A background with subtle texture that adds depth without competing with the content.

Create an animated background and record it as video

Situation: You need a moving background for a video, an intro or a livestream.

  1. On the “Textures” tab, open the “Texture style” menu and choose one of the animated models, such as “Floating bubbles”, “Fluid motion”, “Color waves”, “Rings” or “Stars and bokeh”. The preview starts moving.
  2. Adjust the model’s colors and parameters. Use “Pause” to freeze the frame and “Restore the model’s values” to go back to the original.
  3. For a video, choose the “Video duration” (4, 8, 12 or 20 seconds) and click “Record video (WebM)”. The file downloads when the recording ends.
  4. For an image of the current frame, use “Export” (PNG or JPG). If you need MP4, convert the WebM in WebFaz Video Converter.
Backgrounds on the Textures tab with the animated style Floating bubbles chosen: the notice that the texture moves on its own, the Pause button, the model’s color and parameter settings, the video duration and the Record video (WebM) button, with the live preview in motion.
Animated textures: adjust, pause and record to video.
  1. Point 1: In the texture style list, models such as Floating bubbles, Fluid motion, Color waves, Rings and Stars and bokeh move on their own. When you choose one, the panel changes to the animated background controls.
  2. Point 2: Pause freezes the animation on the frame you want; Play continues where it stopped.
  3. Point 3: Each model has its own colors and parameters, which you adjust with the controls below. Restoring the model’s values goes back to the original.
  4. Point 4: Record video (WebM) records the preview for 4, 8, 12 or 20 seconds and downloads the file. For MP4, use WebFaz Video Conversion.

Result: A WebM video of the animated background, or an image of the frame you chose.

Make a background for slides or social media

Situation: You need a background image for a presentation or post, at the right size.

  1. Build the background with your brand colors.
  2. In “Resolution”, choose the size: Full HD desktop or the story and post formats. The preview changes proportion and shows the pixels.
  3. Click “Export”, choose the format (high-quality PNG or JPG), name the file and download.
Backgrounds with a vertical resolution chosen in the list, and the live preview in the matching format, with the size in pixels shown.
Resolution: from desktop to stories.
  1. Point 1: Choose the file size: Full HD desktop, stories and post formats and others.
  2. Point 2: The preview changes proportion and shows the size in pixels that will be exported.
Export background window with the size in pixels, the format choice (high-quality PNG), the file name and the Download image button.
Export: format, name and download.
  1. Point 1: Choose the image format (high-quality PNG, JPG and others). The editing marker does not go in the file.
  2. Point 2: Download image saves the file on your device.
  3. Point 3: Or take the background straight to another WebFaz app.

Result: A ready background image at the size of its destination.

Take the background to Video Editing and to the Clock

Situation: You want to use the same background in your video or on the full screen of a countdown.

  1. With the background ready, click “Save to my backgrounds” to keep it in this browser.
  2. Click “Use in another app…” and choose Video Editing (as an animated background) or the Clock (as the countdown background).
  3. In the Clock, the background can also be chosen later, under “Edit” → “Choose from Backgrounds”.
Backgrounds with the Continue in another app menu open, offering to use the background in Video Editing as an animated background and in the Clock as the countdown background.
Use the background in other WebFaz apps.
  1. Point 1: Save to my backgrounds keeps the background in this browser to use again.
  2. Point 2: Use in another app: takes the background to Video Editing (as an animated background) or to the Clock (as the countdown background).

Result: The same background applied in another app, without redoing anything.

Where to click, in practice

Images of the tool itself, with the click points numbered. Tap an image to see it at its original size.

WebFaz Backgrounds with the Solid, Gradient and Textures tabs, the texture, density, opacity and blend mode controls, the live preview of the background and the Surprise me, Copy CSS and Export buttons.
Backgrounds: build the background and export.
  1. Point 1: Choose between solid color, gradient or texture and adjust colors, angle, density and blending.
  2. Point 2: Surprise me draws a random combination.
  3. Point 3: Choose the resolution (desktop, stories and others).
  4. Point 4: Export the image or copy the CSS. “Save to my backgrounds” keeps the background in this browser.
WebFaz Backgrounds on the Solid tab: the solid color field, the ready-made colors to choose, the random color and the live preview of the purple background.
Solid background: one color, in one click.
  1. Point 1: Choose the background type: solid, gradient or textures.
  2. Point 2: Click a ready-made color or type the hexadecimal code.
  3. Point 3: Surprise me draws a combination of colors and style.

Tips for a better result

  • Use CSS for gradients: they stay sharp at any size and weigh very little.
  • Prefer PNG or JPG only when you need a fixed image, for example for slides.
  • Check the contrast between the text and the background; very vivid backgrounds hurt readability.
  • Textures and high intensities compete with the content; less is usually more.

Limits, and when this is not the best option

  • Images exported at very large sizes use a lot of browser memory.
  • In animated models, image export comes out as PNG or JPG (SVG becomes PNG) and shows a single frame: the motion exists in the recorded WebM video.
  • Video recording depends on the browser: if it cannot record WebM from the canvas, the tool tells you.
  • The tool generates backgrounds from colors, gradients and textures; it does not edit photos or create illustrations.

Frequently asked questions

Where are the animated backgrounds?
Inside the “Textures” tab, in the “Texture style” menu: models such as Floating bubbles and Rings move on their own.
How do I record an animated background as video?
Choose the model, set the duration (4, 8, 12 or 20 seconds) and click “Record video (WebM)”. For MP4, convert the file in Video Converter.
Can I use the background commercially?
The backgrounds are generated by you from colors and shapes; the result is yours to use.
Can I copy only the CSS?
Yes: “Copy CSS” shows the full composition code for you to paste.
Do I need an account?
No. It is free and runs in the browser, with no sign-up.