---
title: "Shader Footer — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Soyeb · Sections. Shader Footer gives you a powerful collection of animated WebGL-style shader backgrounds that can be customized directly from the Framer…"
canonical: "https://framer.elliotli.dev/component/shader-footer"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Shader Footer

# Shader Footer

Modern Footer with 100 Shaders

[View on Framer](https://framer.com/marketplace/components/shader-footer/?via=elliot-li)

![Shader Footer preview image 1](https://framer.elliotli.dev/og/component/shader-footer/881e00633b1f2357/1600x1200.jpg)

## Summary

Shader Footer gives you a powerful collection of animated WebGL-style shader backgrounds that can be customized directly from the Framer properties panel without external code,…

## Description

Create stunning, interactive footers with **100 unique shader variations**, built entirely and natively in Framer. Shader Footer gives you a powerful collection of animated WebGL-style shader backgrounds that can be customized directly from the Framer properties panel without external code, plugins, or complicated setup.

## **Instructions**

-   Copy and paste the ShaderFooter component into your Framer project.
    
-   Customize the footer content, links, typography, spacing, and layout.
    
-   Use the shader controls to select your preferred shader, adjust colors, **mix multiple colors**, and fine-tune the animation speed and frequency. Everything is editable directly inside Framer.
    

### **How it Works**

Shader Footer includes **4 dedicated shader controllers**:

-   **Shader / Seed**: Choose from 100 different shader variations.
    
-   **Colors**: Set the primary shader color or Combine multiple colors to create custom gradients and effects.
    
-   **Speed & Frequency**: Control the animation speed and shader movement intensity.
    

Beyond the shader controls, the footer is **fully native to Framer**, giving you complete control over typography, font family, font size, spacing, padding, alignment, colors, links, and other native Framer properties.

### **Main Features**

-   100 unique animated shader backgrounds
    
-   Custom color and multi-color mixing
    
-   Adjustable shader speed and frequency
    
-   Fully responsive across desktop, tablet, and mobile
    
-   Fully editable typography and layout
    
-   Customize spacing, padding, sizing, and alignment
    
-   Ready-to-use footer structure
    
-   Easy to duplicate and reuse across projects
    
-   Smooth animated backgrounds
    
-   Designed for modern websites and landing pages
    

### **Use Cases**

Perfect for creative agencies, design studios, SaaS websites, startups, portfolios, personal websites, digital products, AI websites, creative portfolios, Web3 projects, and modern landing pages.

**Made with** ❤ **by** [**Soyeb**](https://framer.link/market)

© **2026 Soyeb. All rights reserved.**

**Have questions or need a custom Framer component? Reach out at** [**heysoyebali@gmail.com**](mailto:heysoyebali@gmail.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #282

## Details

- **Author**: Soyeb
- **Price**: $9.00
- **Published**: 2026-09-14
- **Updated**: 2026-09-19
- **Added**: 2026-09-14
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove