Gradient border

Gradient Border

Daniel Harrow

@thedanielharrow

Daniel Harrow

@thedanielharrow

Around Anything

Gradient Border is a Framer component that allows you to wrap any Framer element into a border with a gradient. It's easy to use (no code) with powerful customisation settings.

All gradient borders you see here were made with this component.

Gradient Border is a Framer component that allows you to wrap any Framer element into a border with a gradient. It's easy to use (no code) with powerful customisation settings.

All gradient borders you see here were made with this component.

Gradient Border is a Framer component that allows you to wrap any Framer element into a border with a gradient. It's easy to use (no code) with powerful customisation settings.

All gradient borders you see here were made with this component.

To add the component to your project, copy the URL below and paste into a desired layer. Voila!

https://framer.com/m/GradientBorder-r4SP.js

Remix the project for examples of use and elements-only alternative.

Component designed to beautify your design without trade-offs.

Full control over content

Gradient Border only wraps around the attached component. You control the content.

Multicolour gradient

Define a gradient from multiple colours.

Fully customisable

Change border's width, round corners, set content's background, and gradient's angle.

Compatibile with the ecosystem

Gradient Border has full support for breakpoints and variants.

You may also need…

Do you need finer control over text or to show a more pleasant time format? Check out these components.

TextPlus

TextPlus expands Framer’s built-in text formatting possibilities with features like ellipsis, justify, or initial (drop cap).

Get TextPlus

TimeScribe

TimeScribe is a Framer component that allows you to present a date or a date time in a relative, easy to read, format.

Get TimeScribe