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 aims to alleviate the difficulties faced by Korean users learning Framer due to a lack of Korean resources by translating the official blog content into Korean and adding practical information. We hope it provides some assistance to those using Framer.
The newly added radial background component is created by combining CSS repeating radial gradients, background position/size control, and Framer Motion-based animations. This article will look closely at how this component functions.
Structure of Radial Gradients
Using the radial background component, you can create infinite circular patterns through two gradients, a few color stops, and various combinations of background positions and sizes. This provides much finer control over project design and allows the implementation of creative and dynamic backgrounds.
Adjusting Size and Position
Another advantage of this component is the ability to freely manage the size and position of the circular patterns. Instead of the shorthand syntax of repeating-radial-gradient(), you can utilize the background-size and background-position syntax. This makes it possible to handle background design much more flexibly and easily create complex and sophisticated patterns.
Keyframe Animation
This Framer component uses duration-based animations from Framer Motion. You can orchestrate the movement of patterns by designating multiple keyframes, allowing you to create dynamic and interactive backgrounds that respond to user interactions and changes.
Discovering New Possibilities
The radial background component opens up exciting new design possibilities for both designers and developers. With the ability to create endless circular patterns, precisely control size and position, and apply keyframe animations, it significantly aids in the creation of dynamic and immersive backgrounds.
Try following and see the effect→
This article is translated and adapted from Framer's official blog post titled ‘Advanced radial gradient techniques: dynamic backgrounds for professional UX’.
