---
title: "Conic Animation — Free Framer component · Best of Framer"
description: "Free Framer component · by Christopher Adjei-Frimpong · Text. A conic gradient effect on your elements"
canonical: "https://framer.elliotli.dev/component/conic-animation"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Conic Animation

# Conic Animation

A conic gradient effect on your elements

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

![Conic Animation preview image 1](https://framer.elliotli.dev/og/component/conic-animation/31735981b9c6e4e2/1600x1200.jpg)

## Summary

A conic gradient effect on your elements

## Description

A beautiful component that creates a smooth rotating border effect around your content. The border spins continuously in a mesmerizing way, while a subtle blur overlay adds depth and style. Perfect for making buttons, cards, or any element stand out with an elegant animated border.

**Key Features:**

-   Smooth rotating gradient that spins infinitely
    
-   Adjustable blur effect for the overlay
    
-   Built-in text with font controls (size, weight, color, spacing)
    
-   Support for adding your own content inside
    
-   Automatically resizes with your canvas
    
-   Customizable colors and animation speed
    
-   Adjustable border radius for rounded corners
    

**How to Use:**

-   Drag the component onto your canvas
    
-   Resize it to fit your design
    
-   Customize the border color and animation speed
    
-   Add your text or connect external content
    
-   Adjust the blur and border radius to match your style
    
-   Fine-tune colors and typography to complete your design
    

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

-   All · #2662

## Details

- **Author**: Christopher Adjei-Frimpong
- **Published**: 2025-08-14
- **Updated**: 2026-02-16
- **Added**: 2025-08-06
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing