Aurora Gradient Tag
A fully customizable animated gradient tag for highlighting content, headings, statuses, or callouts among others in any Framer project.
Make it with Workshop
Build your own component with AI
A fully customizable animated gradient tag for highlighting content, headings, statuses, or callouts among others in any Framer project.
Make it with Workshop
Build your own component with AI
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.
Edit the Label text - Update the text field to display a your preferred text you want to highlight.
Customize the Gradients - Define the colors you want to use for the gradient animation. You can choose between three colors.
Adjust Size - Modify padding and width to your liking.
Style Typography - Change font size, weight and alignment to fit your brand.
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.
