WebFaz Backgrounds

Colors, gradients and textures for your ideas

PT

Backgrounds are generated in your browser; nothing is sent. Learn more

A background that looks like you.

Combine colors, explore textures and create backgrounds for screens, posts and projects.

Live preview1920 × 1080 px
Custom background

Drag on the image to move the origin. You can also use the X and Y controls on the Gradient tab. The marker does not appear in the exported file.

Export background

1920 × 1080 px · without the editing marker

About Backgrounds

Creates custom backgrounds with colors, gradients and textures, including textures that move and can be recorded as video, for websites, presentations and social media, with the matching CSS.

What makes Backgrounds different

Instead of only exporting an image, Backgrounds creates moving backgrounds and delivers them in forms you can use straight on your site, in video and in the Clock countdown. The features that stand out:

  • Textures that move

    The Texture style menu has 19 animated models (floating bubbles, fluid motion, color waves, rings, stars and bokeh and others). Pick one and the preview starts moving. Adjust each model’s colors and parameters and pause on the frame you prefer.

  • Record the background as video

    With an animated model, Record video (WebM) records the preview for 4, 8, 12 or 20 seconds and downloads the file. If you prefer an image, export the current frame as PNG or JPG. For MP4, use WebFaz Video Converter.

  • Full composition CSS, ready to paste

    One click on Copy CSS generates the code with colors, gradient and texture embedded: your site’s background looks identical to the preview, with no image file.

  • Take the background to other WebFaz apps

    With Use in another app, send the background to Video Editing (as an animated background) or to the Clock (as the countdown background).

  • Textures with blend modes

    Overlay a texture on the background and adjust style, density, opacity and blend mode. Generate new texture creates another variation of the same style.

  • Gradients with fine control

    Choose the type, angle and scale, drag the origin right on the preview and start from ready-made palettes or your own colors.

  • Ready-made resolutions

    From Full HD desktop to story and post formats, with the preview in the right proportion and the size in pixels shown.

  • Solid, Surprise me and My backgrounds

    A solid color in one click, a draw of combinations and a place to save the backgrounds you liked, in this browser.

A practical example

You need a soft background for a presentation. You choose the gradient type, set two of your company’s brand colors, adjust the angle and watch the preview. You download a PNG for the slides and copy the equivalent CSS to use on the same campaign’s website.

How to use it

  1. Choose the type of background (color, gradient or texture).
  2. Adjust colors, angle and intensity.
  3. Watch the live preview.
  4. Download as PNG, JPG or SVG, or copy the CSS. With animated textures, record a WebM video.

Limits and cautions

  • Images exported at very large sizes use a lot of browser memory.

A ferramenta em uma imagem

Os pontos de clique estão numerados. Toque na imagem para vê-la em tamanho original. As demais telas, passo a passo, estão no guia “Como funciona”.

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.

When to use it

  • Creating backgrounds for presentations, video covers and social media posts.
  • Generating the CSS of a gradient to use on your site.
  • Testing color combinations before settling on a visual identity.

Tips

  • Choose colors with good contrast against the text that will sit on top.
  • For the web, prefer the gradient’s CSS over a large image.
  • Export at the size of the target screen; huge images use browser memory with no visible gain.

What happens in your browser

The background is drawn in a browser canvas with the colors, angle and intensity you adjust, and the preview updates in real time. When you download, the image is generated at the chosen size, as PNG, JPG or SVG.

SVG is a vector format: it can be enlarged without losing sharpness and is usually light for gradients. PNG and JPG are pixel images, better for direct use in slides and social media; JPG is smaller, and PNG preserves transparency.

The equivalent CSS lets you reproduce the background on a site without downloading any image, which is faster for simple gradients.

Read the full guide: real-world use cases, tips and limits →

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

Perguntas frequentes

Can I use the background commercially?
The backgrounds are generated by you from colors and shapes; the result is yours to use.
Which format should I choose?
SVG for lightweight, scalable gradients; PNG or JPG when you need a fixed image.
Can I copy the CSS?
Yes, the tool shows the background’s CSS for you to paste into your site.
Does the image carry a watermark?
No. Downloaded files carry only a discreet WebFaz credit in the metadata.
Is my data sent anywhere?
No. Everything is generated in your browser.