header-logo
Learn how to use Wix to build your site and business.
Design and manage your site using intuitive Wix features.
Manage subscriptions, plans and invoices.
Run your business and connect with members.
Learn to purchase, connect or transfer a domain to your site.
Get tools to grow your business and web presence.
Boost your visibility with SEO and marketing tools.
Get advanced features to help you work more efficiently.
Find solutions, learn about known issues or contact us.
placeholder-preview-image
Improve your skills with our courses and tutorials.
Get tips for web design, marketing and more.
Learn to increase organic site traffic from search engines.
Build a custom site using our full-stack platform.
Get matched with a specialist to help you reach your goals.
placeholder-preview-image

Studio Editor: Adding a WebGL Effect to Media Backgrounds

9 min
In this article
  • Adding a WebGL effect
  • Customizing a WebGL effect
  • Removing a WebGL effect
  • FAQs
Transform your client projects with our WebGL effects, designed to turn media backgrounds into showstoppers. These effects engage site visitors while ensuring optimal performance. Choose from a variety of impressive presets, tweak their properties and decide how they activate—automatically on scroll, or through the visitor's mouse movement. 
A GIF showing a live site with WebGL animations in the background of multiple sections.

Adding a WebGL effect

Head over to the Inspector panel to add a WebGL effect to a section media background. You can choose from various different presets, depending on the look and interaction you want to achieve.  
Note:
It is not possible to combine background scroll effects and WebGL effects.

To add a WebGL effect:

  1. Add an image or video to the relevant section's background.
    Note: WebGL effects are not supported for GIF backgrounds, as well as media backgrounds set to fit as Tiles.
  2. Select the section on the canvas. 
  3. Apply a WebGL effect:
    1. Click the Open Inspector icon  at the top right of the editor.

    2. Click the Animations and Effects tab .
    3. Click + Add under WebGL Effects.
    4. Select an effect from the list.
Tip:
Hover over the preset icons to see a preview of how they look. You can also preview the effect on the canvas by clicking Adjust Animation (make sure the Preview in editor toggle is enabled).
A GIF showing the available WebGL animation preset previews in the Inspector panel

Customizing a WebGL effect

Customize WebGL effects to fine-tune their look and behavior, whether you're adding subtle distortions or bold, dynamic motion. Each effect comes with its own set of adjustable settings—like intensity, speed, and direction—giving you full control over how it interacts with your content. 
For certain effects, you can also decide what triggers them on your client's site – autoplay, scrolling, mouse movement, or a combination of multiple actions. 

To customize a WebGL effect:

  1. Select the relevant section.
  2. Click the Open Inspector icon  at the top right of the editor.
  3. Click the Animations and Effects tab .
  4. Click the effect you want to change. 
  5. Click Adjust Animation to change its settings:
The Preview in editor toggle at the bottom of the panel is enabled by default, allowing you to experience your effect in action on the canvas.  
A screenshot of the canvas next to the Inspector panel, adjusting the RGB split effect and enabling the preview toggle

Removing a WebGL effect

You can always remove a WebGL effect you've previously added to a section background. 

To remove a WebGL effect:

  1. Select the relevant section.
  2. Click the Open Inspector icon  at the top right of the editor.
  3. Click the Animations and Effects tab .
  4. Click the More Actions icon  next to the WebGL effect.
  5. Select Remove
A screenshot of the canvas and the Inspector panel, Animations and Effects tab, clicking the icon to remove the effect

FAQs

Click a question below to learn more about WebGL effects in the Studio Editor.