ShaderPress manual

For ShaderPress 1.0.0. ShaderPress adds animated shader backgrounds to any part of a WordPress site: a hero section, a row, a column, a whole page. Your content stays on top and clickable.

• 1. Requirements
• 2. Create a background
• 3. Add a background to your site
• 3.1 CSS class (any theme or builder)
• 3.2 Placement rules (CSS selector)
• 3.3 Shortcode
• 3.4 Gutenberg (block editor)
• 3.5 Elementor
• 3.6 WPBakery
• 3.7 Divi
• 3.8 Bricks, Beaver Builder, Oxygen, Breakdance and others
• 4. Visitors, performance and accessibility
• 5. Free and Pro, licences
• 6. Troubleshooting
• 7. Limits

1. Requirements

• WordPress 6.5 or later and PHP 8.2 or later.
• The animation runs on WebGPU. Visitors need a browser and graphics hardware that support it,
• and your site must use HTTPS. Recent Chrome and Edge support WebGPU; support in Safari and
• Firefox depends on the version and the operating system.
• Visitors without WebGPU, or who ask for reduced motion, see the background’s fallback colour
• instead. Nothing breaks; they just get a static colour.

2. Create a background

1. Go to ShaderPress in the WordPress admin menu.
2. Quick start: open ShaderPress → Placement rules and click Create starter backgrounds.
3. This adds 8 ready-made backgrounds (20 with Pro). Running it again won’t create duplicates.
4. Or click Create background, give it a title and design it:

• Effect: the shader. Its own controls (colours, speed, distortion and so on) appear below it.
• Fallback colour: shown before the animation starts, and to visitors who can’t or don’t
• want to see animation. Pick a colour close to the effect’s main colour, and one your text
• stays readable on.
• Opacity: how strongly the shader shows.
• Quality: Low, Balanced (default) or High. Lower quality renders fewer pixels and
• uses less battery and GPU.
• Static background on mobile: shows only the fallback colour on screens up to 767 px wide.
• Live preview: shows the result as you edit.

1. Click Publish. Only published backgrounds appear on the site.

The designer shows each background’s CSS class, for example shaderpress-123. The number is the background’s ID. You need this class for most of the methods below.

Pro adds the full effect library and layered compositions (several effects combined, with blend modes and opacity per layer). Layers are edited under Advanced: layered preset JSON → Apply JSON.

3. Add a background to your site

Every method below does the same thing: it marks a container as “this one gets background X”. The shader then fills that container behind its content. Pick whichever suits your editor.

Rules that apply to every method:

• The container needs height: content inside it, or a minimum height. The shader can’t give an
• empty element its height.
• The shader sits behind the container’s content. Anything inside the container that has its own
• solid background (an overlay, an image, a coloured inner box) covers it.
• If one container is targeted twice, the first match wins: classes first, then placement rules
• in their listed order.

3.1 CSS class (any theme or builder)

Add the background’s class, for example shaderpress-123, to the container’s CSS class field. Every major page builder has one (the exact location is listed per builder below). In the block editor, it’s Block → Advanced → Additional CSS class(es). In hand-written HTML:

<section class="hero shaderpress-123">…</section>

3.2 Placement rules (CSS selector)

Use this when you can’t or don’t want to add a class, for example to target a theme’s header.

1. Go to ShaderPress → Placement rules.
2. In an empty row, enter a CSS selector such as .hero, #main-banner or body.
3. Choose the Background.
4. Page ID: 0 applies the rule on every page. Enter a page’s ID to apply it only there. You can
5. find the ID in the page’s edit link (post.php?post=42 means ID 42).
6. Click Save placements. To remove a rule, clear its selector and save.

Two empty rows appear each time; save and reopen the page to get more. Up to 50 rules are kept.

3.3 Shortcode

• id: the background’s ID (the number in its class).
• height: minimum height in pixels, from 40 to 2000. Default 320.
• Content between the tags is shown on top of the shader and may contain other shortcodes.

3.4 Gutenberg (block editor)

1. Select a Group, Cover, Columns or Column block.
2. In the block settings sidebar, open the ShaderPress panel and choose a Background.
3. Save. The animation appears on the published page. The block editor itself doesn’t animate it;
4. use the designer’s live preview to see what it looks like.

For other blocks, use the CSS class method (Block → Advanced → Additional CSS class(es)).

Cover blocks: a Cover’s own image and its overlay sit above the shader. Remove the image and set the overlay opacity to 0, or use a Group block instead.

3.5 Elementor

1. Select a container (or a legacy section or column).
2. Open the Style tab and the ShaderPress section.
3. Choose a Shader background. The editor preview shows it straight away; choose None to
4. remove it.
5. Update the page.

Notes:

• Backgrounds created while the Elementor editor is open appear in the list after you reload the
• editor.
• Elementor’s Background Overlay and a background image or video on the same container sit
• above the shader. Turn them off, or make them partly transparent for a tinted effect.
• Placement rules (section 3.2) also work in Elementor, but the editor preview only picks up rule
• changes after a reload.

3.6 WPBakery

1. Edit a Row (or Column).
2. In the General tab, enter shaderpress-123 in Extra class name.
3. Save the row and update the page.

In the Design Options tab, leave the background colour and image empty, or they may cover the shader. Check the result on the published page; the frontend editor may not animate it.

3.7 Divi

1. Open a Section or Row‘s settings.
2. Go to Advanced → CSS ID & Classes and enter shaderpress-123 in CSS Class.
3. Save and publish.

Divi’s own background options (gradient, image, video, parallax) draw layers that can cover the shader; turn them off on that section. Check the result on the published page; the Visual Builder may not animate it.

3.8 Bricks, Beaver Builder, Oxygen, Breakdance and others

Use the builder’s CSS class field on a section or container, then check the published page:

• Bricks: select the element, then add the class in the class field at the top of the panel
• (or Style → CSS → CSS classes).
• Beaver Builder: row or column settings → Advanced → HTML Element → Class.
• Oxygen / Breakdance: the element’s class selector or Advanced → Attributes → class.
• Anything else: any field that sets the HTML class attribute works. If there is none, use a
• placement rule (section 3.2).

Dedicated controls exist only for Gutenberg and Elementor. The class method works with the others on the published page; their editor previews may not show the animation.

4. Visitors, performance and accessibility

• Reduced motion: visitors whose system asks for reduced motion see the fallback colour, never
• the animation. This switches live if they change the setting.
• Off-screen and hidden tabs: shaders start when they come near the screen and pause when they
• scroll away or the tab is hidden.
• Mobile: on screens up to 767 px wide, Balanced quality renders at half resolution. Tick
• Static background on mobile to show only the fallback colour there.
• Clicks: the shader never takes clicks; links and buttons above it work normally.
• Size: the engine is large. Make sure your server or CDN compresses JavaScript (gzip or Brotli).
• Use only a few animated backgrounds per page.
• Privacy: everything is served from your own site. ShaderPress sends no tracking data.

5. Free and Pro, licences

• Free: 8 effects, 8 starter backgrounds, all placement methods.
• Pro: the full effect library, layered compositions and 12 more starter backgrounds. Upgrade
• from the Upgrade link in the ShaderPress menu; the Pro version replaces the free plugin and
• keeps your backgrounds.
• Activate a licence: enter the licence key when asked, or on ShaderPress → Account.
• When a licence expires: your saved Pro backgrounds keep showing on the site. Creating or
• editing Pro backgrounds is locked until you renew. Free features keep working.
• After a refund: Pro backgrounds stop animating and show their fallback colour. Free
• backgrounds keep working.
• Renewing: if you receive a new licence key, activate it on the Account page. Pro editing
• and updates return straight away.
• Going back to the free version: Pro backgrounds show their fallback colour; free ones keep
• animating.

6. Troubleshooting

Start with the quick check, then find your symptom below.

Quick check

1. Is the background published?
2. Is the class spelled exactly, with the right number (shaderpress-123, not shaderpress123 or
3. shaderpress_123)?
4. Does the page use HTTPS?
5. Open the page in a recent Chrome or Edge on a computer. If it animates there, the setup is
6. right and the issue is the other browser or device (see “Only the fallback colour shows”).
7. Clear your page cache and any CDN cache after changes.

Nothing appears at all (no colour, no animation)

Only the fallback colour shows (no animation)

This is the designed behaviour whenever animation isn’t possible or wanted:

The shader is hidden behind something

The shader is drawn behind everything inside the container. Any element inside it with its own solid background covers it:

• Elementor: Background Overlay, or a background image or video on the same container.
• Gutenberg Cover: the cover image and its overlay (set the overlay opacity to 0).
• WPBakery / Divi / others: the builder’s background colour, gradient, image, video or parallax
• layer on that section. An inner row or column with a solid background also covers it.
• Your theme: some themes give inner wrappers a background colour. Put the class on the inner
• element instead, or remove that background with CSS.

Text or buttons are hard to read

Pick a fallback colour and effect colours that contrast with your text, or set the text colour on the container. Remember that visitors without animation only see the fallback colour.

It works in the editor or when logged in, but not for visitors

Usually caching or JavaScript optimisation:

• Clear the page cache and CDN cache.
• In your optimisation plugin (WP Rocket, LiteSpeed Cache, Autoptimize, SiteGround Optimizer and
• similar), exclude ShaderPress’s scripts from combine/merge JavaScript and from *delay
• JavaScript until interaction*. Excluding shaderpress usually covers them. With “delay” active,
• the shader only starts after the visitor scrolls or clicks.
• Make sure the CDN serves .js files with a JavaScript content type, and that a Content Security
• Policy, if you use one, allows scripts from your own domain.

The editor preview doesn’t animate

• Gutenberg: expected; check the published page or the designer’s live preview.
• Elementor: should animate from version 1.0.0. If not, update ShaderPress and reload the
• editor. Backgrounds or placement rules changed while the editor was open need a reload.
• WPBakery, Divi, Bricks and others: their previews may not run the shader. Check the published
• page.

The background I want isn’t in the list

• Only published backgrounds are listed. Publish it, then reload the block or Elementor editor.
• Lists and the site show up to 100 published backgrounds; delete unused ones if you have more.

“Unknown effect”, “Layering requires Pro” or another error when saving

• Unknown effect or Layering requires Pro: the background uses Pro effects or layers, and
• Pro isn’t active. Activate or renew the licence, or choose a free effect.
• This interactive component is not supported as a background: camera, tracking and HTML-input
• components can’t be backgrounds.
• Maximum layer depth is six or too many layers: simplify the composition (up to 32 layers,
• nested up to 6 deep).

The animation stutters or the device gets hot

• Lower Quality to Low, or tick Static background on mobile.
• Use fewer animated backgrounds per page; each one uses the GPU.
• Prefer simpler effects for large areas; layered compositions cost more.

The shader shows in the wrong place or spills over

• The container must be its own box; ShaderPress makes it position: relative if it isn’t
• positioned, and the shader fills it exactly, following its rounded corners.
• If a parent uses CSS transforms, filters or overflow tricks, put the class on the element that
• actually has the size and shape you want.
• Pseudo-elements (::before, ::after) and content in iframes from other sites can’t be targeted.

Pro editing is locked

• Check ShaderPress → Account: is a licence active on this site?
• After renewing, if you received a new licence key, activate it there.
• An expired licence keeps saved Pro backgrounds showing but locks editing; renew to edit again.

7. Limits

• Up to 100 published backgrounds and 50 placement rules per site.
• Compositions: up to 32 layers, nested up to 6 deep.
• Dedicated controls only for Gutenberg (Group, Cover, Columns, Column) and Elementor. Other builders
• use the CSS class or placement rules.
• Multisite network activation hasn’t been tested.
• WebGPU only, no WebGL fallback: visitors without WebGPU see the fallback colour.