---
title: "G-Bars — Free Framer component · Best of Framer"
description: "Free Framer component · by Iqtidar Tara · Backgrounds. Gradient Bars Background"
canonical: "https://framer.elliotli.dev/component/g-bars"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/G-Bars

# G-Bars

Gradient Bars Background

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

![G-Bars preview image 1](https://framer.elliotli.dev/og/component/g-bars/9eb8f1155a78f475/1600x866.jpg)

## Summary

Gradient Bars Background

## Description

Great — free it is. Here's the finalized description (trimmed since pricing doesn't need mentioning for a free component) and the full submission walkthrough for that "New Component" modal you screenshotted.

**Final Description (paste as-is):**

Gradient Bars Background is a fully animated, code-based background component for Framer. It renders a customizable set of gradient bars that pulse, float, or wave behind your content — perfect for hero sections, SaaS landing pages, and portfolio intros that need subtle motion without heavy assets or video.

Everything is controlled from the property panel — no code editing needed:

-   **Bars** — set how many bars render (1–80)
    
-   **Bar Width & Height** — fine-tune bar thickness and length
    
-   **Direction** — lay bars out on the Y axis or X axis
    
-   **Gradient From / To** — pick your own two-color gradient
    
-   **Animation Mode** — choose Pulse, Float, Wave, or turn animation off entirely
    
-   **Duration & Intensity** — control animation speed and how far/strong the motion is
    
-   **Stagger** — offset each bar's animation for a rippling, sequential effect
    
-   **Background Color** — set the base background behind the bars
    
-   **Content Slot** — drop in your own layers, or use the built-in center text field for a quick heading
    

Free to use in any project. Lightweight, dependency-free, pure Framer code — built to stay fast and not bloat your site.

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

-   All · #607

## Details

- **Author**: Iqtidar Tara
- **Published**: 2026-07-14
- **Updated**: 2026-07-14
- **Added**: 2026-07-14
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background