---
title: "Gradient Strips  — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Sanna Granqvist · Backgrounds. Animated gradient bars for backgrounds"
canonical: "https://framer.elliotli.dev/component/gradient-strips-bg"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Gradient Strips

# Gradient Strips

Animated gradient bars for backgrounds

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

![Gradient Strips  preview image 1](https://framer.elliotli.dev/og/component/gradient-strips-bg/7ab690e8ca9a0f68/1600x1200.jpg)

## Summary

Animated gradient bars for backgrounds

## Description

Choose how the bars scale across the width:

-   valley
    
-   hill
    
-   rounded-hill
    
-   wave
    
-   ramp-left
    
-   ramp-right
    
-   flat
    

Each shape influences vertical scale distribution and works together with gradient angle spread for different visual rhythms.

### Color control

Use curated presets:

-   soft
    
-   neon
    
-   sunset
    
-   pink-sunset
    

Switch to custom colors when full control is needed. Define gradient From and To range, add subtle hue or intensity drift, and experiment with blend modes for layered compositions.

### Motion behavior

Appear animations:

-   scale
    
-   fade
    
-   fade-slide
    

Control order and stagger for progressive reveals. Add looping pulse with three modes: pulse, gentle-pulse, or none. The component respects prefers-reduced-motion automatically.

### Visual extras

-   Optional edge feather masking
    
-   Optional noise overlay
    
-   Extra glow layer for full-height flat ribbed mode
    

All effects can be disabled individually.

### Who it’s for

Designers building high-impact hero sectionsTemplate creators who need reusable animated backgroundsBrands adding motion without importing video assets

### Return policy

Due to the digital nature of this product, purchases are non-refundable. If you run into issues, reach out and I will help you get it working as intended.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-z8imxbtm-XiiP1NNfnEzJUusNmWCm5tc39iF1Na)

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

-   All · #1350

## Details

- **Author**: Sanna Granqvist
- **Price**: $12.00
- **Published**: 2026-02-19
- **Updated**: 2026-05-10
- **Added**: 2026-02-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