Design
Insights
Aug 29, 2025
Create Dynamic Backgrounds with Framer’s Radial Gradients
By using Framer's new circular background component, you can easily create a dynamic UX background with repeating circular gradients, adjustable position and size, and animations from Framer Motion.
Uploaded by
Translated by
Contents
Table of Contents
This document is aimed at helping domestic users of Framer who face difficulties due to a lack of Korean resources, by translating the content of the official blog into Korean and adding useful information for practical use. I hope it serves as at least a small help for those using Framer.
The newly added radial background component was created by combining CSS repeating radial gradients with control over background position/size and Framer Motion-based animations. In this article, we'll take a detailed look at how this component works.
Radial Gradient Structure
By using the radial background component, you can create infinite circular patterns through two gradients, several color stops, and various combinations of background positions and sizes. This allows for much more precise control over your project design and enables you to implement original and dynamic backgrounds.
Adjusting Size and Position
Another advantage of this component is the ability to freely manipulate the size and position of the circular patterns. Instead of the shorthand syntax of the repeating-radial-gradient() function, you can utilize the background-size and background-position properties individually. This makes handling background designs much more flexible and allows for easy creation of complex and intricate patterns.
Keyframe Animation
This Framer component uses duration-based animations from Framer Motion. As a result, you can specify and coordinate the movement of patterns through multiple keyframes. This allows you to create dynamic and interactive backgrounds that react to user interactions or changes.
Discovering New Possibilities
The radial background component is an exciting feature that opens up new design possibilities for both designers and developers. Since you can create infinite circular patterns, precisely control size and position, and apply keyframe animations, it's a great help for creating dynamic and immersive backgrounds.
See the effect and try it out→
This article is a translated and adapted version of the Framer official blog post ‘Advanced radial gradient techniques: dynamic backgrounds for professional UX’.
