---
title: "Aurora Gradient Tag — Free Framer component · Best of Framer"
description: "Free Framer component · by Honcho · Backgrounds. Overview Aurora Gradient Tag brings a vibrant, animated touch to your UI with smooth flowing gradients that instantly elevate visual hierarchy."
canonical: "https://framer.elliotli.dev/component/aurora-gradient-tag"
---

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

# Aurora Gradient Tag

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

![Aurora Gradient Tag preview image 1](https://framer.elliotli.dev/og/component/aurora-gradient-tag/f7eb548d5f154d64/1600x1200.jpg)

## Summary

Overview Aurora Gradient Tag brings a vibrant, animated touch to your UI with smooth flowing gradients that instantly elevate visual hierarchy.

## Description

**Overview**

Aurora Gradient Tag brings a vibrant, animated touch to your UI with smooth flowing gradients that instantly elevate visual hierarchy.

**Features**

Fully customizable text and typography (font size, weight, color)• Adjustable padding and border radius• Animated gradient background with configurable colors and animation speed• Works seamlessly with headings and subheadings• Lightweight, responsive, and motion-friendly

**Customization Props**

-   Label: string — sets the displayed section name
    
-   Gradient 1-3: array — define the colors in your gradient
    
-   Speed: number — controls the background movement duration
    
-   Font Size: number or string — text size
    
-   Padding X and Y: number or string — inner spacing
    
-   Radius: number — border radius for rounded corners
    

**Usage**

Using Aurora Gradient Tag is very simple. Just drag it into your Framer project and customize it from the right hand panel.

1.  **Edit the Label text -** Update the text field to display a your preferred text you want to highlight.
    
2.  **Customize the Gradients** - Define the colors you want to use for the gradient animation. You can choose between three colors.
    
3.  **Adjust Size** - Modify padding and width to your liking.
    
4.  **Style Typography** - Change font size, weight and alignment to fit your brand.
    
5.  **Place it Anywhere** - Use it above headings, inside sections, on cards, or as a badge in UI components. The possibilities are endless.
    

Aurora Gradient Tag is lightweight, flexible, and works with any layout, making it perfect for modern Framer pages that need an animated visual accent.

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

-   All · #5583

## Details

- **Author**: Honcho
- **Published**: 2025-11-18
- **Updated**: 2025-11-18
- **Added**: 2025-11-05
- **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