---
title: "Border Gradient — Free Framer component · Best of Framer"
description: "Free Framer component · by Ali · Backgrounds. A very first customizable Border Gradient Framer component by Ali Kashif that lets you easily add gradient borders to any frame or element in Framer."
canonical: "https://framer.elliotli.dev/component/border-gradient"
---

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

# Border Gradient

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

![Border Gradient preview image 1](https://framer.elliotli.dev/og/component/border-gradient/362c46e6483fc8c0/1600x1200.jpg)

## Summary

A very first customizable Border Gradient Framer component by Ali Kashif that lets you easily add gradient borders to any frame or element in Framer.

## Description

A very first customizable Border Gradient Framer component by Ali Kashif that lets you easily add **gradient borders** to any frame or element in Framer.

**Features:**

-   **Border Width & Radius** – Control thickness and roundness of the border.
    
-   **Gradient Colors** – Pick and adjust multiple colors for smooth, modern borders.
    
-   **Gradient Angle** – Rotate the gradient to fit your design perfectly.
    
-   **Background Control** – Set a solid background color inside the border.
    
-   **Content Slot** – Connect any content (text, images, layouts) with the box just like u do with Ticker and other stuff.
    

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

Make your buttons, cards, and sections stand out with elegant gradient outlines — all without writing a single line of code.

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

-   All · #2778

## Details

- **Author**: Ali
- **Published**: 2025-09-24
- **Updated**: 2025-11-24
- **Added**: 2025-09-17
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background