Framer has been adding features at pace in 2026, but Shaders is the one that changes what a website can look and feel like without writing a single line of code. Published on March 24, 2026, it's not an animation feature or a component — it's a GPU-rendered visual effects system built directly into the canvas. The results look like the kind of motion graphics that used to require a specialist developer and a WebGL shader library. Now you drag them in from the Insert Panel.

This guide covers everything: what Shaders are, how each type works, how to use Logo Shaders specifically, the performance rules that matter, and which use cases they're built for.

What are Framer Shaders?

Shaders in Framer are visual effects that run on the GPU rather than the CPU. Where a CSS animation interpolates between fixed values, a shader uses mathematical functions executed on graphics hardware to produce effects that are genuinely continuous, fluid, and reactive — things like animated gradients that breathe, glass surfaces that refract what's behind them, and particle fields that respond to motion.

The difference in output quality is significant. A CSS gradient is a fixed colour transition. A shader gradient is a living surface that changes over time based on procedural math. That's why they look different — and why they require the GPU to run efficiently.

In Framer, each shader is its own self-contained tool. You don't configure them the same way — each has its own set of controls, behaviour, and use case. They're available in the Insert Panel under Shaders and are added to your project by drag and drop.

Every shader type, explained

Gradient shader

The Gradient shader produces animated flowing colour gradients. You set your colours, and the shader handles the animation — the way the colours blend, move, and shift over time is handled procedurally by the GPU. The result is a background that feels alive rather than static. It renders at full performance on any modern device and adapts to any frame size.

Best used for: hero backgrounds, section dividers, and any place where a static background feels insufficient but a video background would be too heavy.

Glass shader

The Glass shader creates liquid distortion and refraction effects. It simulates the way light bends when it passes through a glass surface, warping whatever is behind or beneath it. The distortion responds to the content it overlays, making it feel physically grounded rather than like a CSS filter approximation.

Best used for: cards, modal overlays, feature section backgrounds, and anywhere a sense of depth and material would improve the layout.

Holo shader

Holo is the newest addition to the shader library, launched April 1, 2026. It simulates how light splits into rainbow colours on holographic surfaces — the same iridescent effect you see on holographic foil, holographic stickers, or certain premium packaging materials.

What makes Holo different from the Gradient shader is how you control it. Instead of picking colours, you set mathematical parameters: Seed (which controls the configuration of the rainbow pattern), Warp (which controls how the light bends and flows), and Flow (which controls animation speed and direction). Every seed value produces a completely different colour configuration, which means the variation space is effectively infinite.

Best used for: premium product showcases, speaker cards, event pages, and any context where an iridescent, high-end visual language fits the brand.

Particles shader

The Particles shader generates animated particle systems — floating dots, dust, sparks, or abstract points that move through a frame. All particle movement is GPU-accelerated, so you can have hundreds of particles animating simultaneously without any performance cost to the rest of the page.

Best used for: hero sections with dark backgrounds, teaser pages, and any context where subtle ambient motion adds atmosphere without being distracting.

Logo Shaders: the feature that changes product pages

Logo Shaders are a separate category within the Shaders library, launched alongside the core Shaders feature. Where the other shaders are background and atmospheric effects, Logo Shaders are applied directly to your logo or icon asset.

The way they work is specific: you upload an SVG or PNG of your logo, and the shader reads the edges of that shape. The animations that the shader produces — the colour flow, the light response, the depth effects — all respond to the silhouette geometry of your specific asset. The result is that your logo looks like it was sculpted in three dimensions rather than existing as a flat graphic.

Framer launched with two Logo Shaders: Gradient and Glass.

Logo Gradient

Applies flowing colour animation to the surface of your logo. The colours move across the shape following the gradient shader's procedural system, but they're contained within and responsive to your logo's exact edges. Especially effective on wordmarks and icon shapes with strong geometric structure.

Logo Glass

Applies glass refraction and depth effects to your logo shape. The dispersion, contour, and bevel controls become active and add realistic three-dimensional depth to what was previously a flat asset. The animation responds to the shape's edges automatically — you don't configure how it responds, the shader reads your geometry and adapts.

Logo Shader effects: Contour, Dispersion, and Bevel

Both Logo Shaders share three effects that can be adjusted from the right panel:

Contour traces the inner edges of your logo shape and adds a glow or border that follows the geometry precisely. It makes flat logos feel three-dimensional without any manual masking or path work.

Dispersion splits light into its colour components at shape edges, simulating chromatic aberration — the colour fringing you see when light passes through glass or a prism. Applied subtly, it adds optical realism. At higher values, it creates a deliberate visual effect.

Bevel adds a directional light source that creates the impression of raised edges on your logo, as if the shape has physical thickness. A single slider controls the depth. It's the effect that makes Logo Glass logos look genuinely three-dimensional even at first glance.

How to add a shader to your Framer project

Press I or click the + icon in the top toolbar to open the Insert Panel. Scroll to Shaders or search by name. Drag any shader onto your canvas. It lands as a resizable frame — resize it to fill your section, hero, or card as needed.

For Logo Shaders: after placing the shader on canvas, select it and look for the asset upload control in the right panel. Upload your SVG or PNG file. The shader reads the edges automatically and begins animating. Then adjust Contour, Dispersion, and Bevel in the right panel to taste.

Shaders can be used inside any Framer frame. Set z-index lower to use as a background behind content, or place above images as an overlay. They work inside components, on CMS detail pages, and on any breakpoint — they adapt to frame dimensions automatically.

When to use Shaders on your site

Logo Shaders are particularly impactful on teaser pages and product launches, which is how Framer describes their intended use case. The reason is specific: when someone lands on a page before a product is released, the visual impression has to carry the entire page. A Logo Shader on a coming-soon page communicates that something interesting is about to happen in a way that static design cannot.

Beyond launches, the use cases by shader type break down clearly. Gradient and Glass work as hero section backgrounds for SaaS and portfolio sites where the section needs to feel dynamic without a video. Holo works for premium and editorial contexts — conference speaker cards, limited edition product pages, creative agency headers. Particles works for dark-background hero sections where ambient depth adds atmosphere. Logo Shaders work wherever your logo appears as the primary visual element: launch pages, about pages, loading screens.

Performance: what you need to know before going live

Shaders render via WebGL on the visitor's GPU. This is why they look different from CSS effects — and it's also the constraint you need to understand before publishing a page with multiple shaders.

A single shader on a page runs at full performance on any modern device, typically maintaining 60fps with minimal GPU overhead. Two or three shaders on the same page is still fine on desktop and most mobile devices. Four or more shaders on a single page starts to affect frame rate on mid-range and older mobile hardware.

The practical rule: keep shaders to three or fewer per page. If you need more visual variation, use the same shader in multiple frames rather than adding different shader types. Use SVG files for Logo Shaders rather than PNGs — the shader reads vector edge data more accurately than pixel-based edge detection. And always test your published staging URL on an actual mobile device before going live. Framer's canvas preview runs on your Mac's GPU, which will outperform the hardware your visitors are using.

Why this matters for template designers

For designers building Framer templates, Shaders change the visual ceiling. Features that previously required custom WebGL code or a third-party library are now available to anyone building in Framer without any technical knowledge. A template that uses a Logo Glass shader on its hero is demonstrating a level of visual sophistication that was simply not accessible through the canvas before this feature shipped.

Used deliberately — one strong shader on the page rather than several competing effects — Shaders are the fastest way to make a Framer site look genuinely different from the current baseline. That distinction matters for templates, for client sites, and for any product launch where the first impression is the whole impression.