--- title: "Creating dynamic radial backgrounds with CSS and Framer Motion: UX Tutorial" description: Master advanced background techniques using CSS repeating-radial-gradients and Framer Motion. This technical guide shows UX designers how to implement dynamic, responsive background effects that enhance visual hierarchy and user experience. published: "Oct 8, 2026, 9:30 AM UTC" --- [Blog](../) [Resources](../resources) # Advanced radial gradient techniques: dynamic backgrounds for professional UX [Ee Venn Soh](https://twitter.com/vennsoh) Published Jun 6, 2023 0 min read Introducing a new component — the radial background component. This component combines CSS repeating-radial-gradient, background-position/size manipulation, and is powered by Framer Motion. In this blog post, we’ll dive into how it works. ### Radial Gradient Structure The radial [background](../../dictionary/background) component allows you to create endless radial patterns using two gradients, a few color stops, and varying background position/size combinations. This gives you greater control over the design of your project and enables you to create unique and dynamic backgrounds. See [Radial Gradient](../../dictionary/radial-gradient). ### Size and Position Manipulation With the radial background component, you can gain greater control over the size and position of your radial pattern. You can use background-size and background-position syntax separately rather than the repeating-radial-gradient() function shorthand syntax. This gives you more flexibility in designing your background and enables you to create more complex and intricate patterns. ### Keyframe Animations The Framer component uses Framer Motion’s duration-based animations, providing the flexibility to specify a range of keyframes for orchestrating the pattern’s movement. This means you can create dynamic and interactive backgrounds that respond to user interactions or changes in the environment. ### Discover the Potential The radial background component is an exciting addition to Framer’s library that offers designers and developers greater control over the design of their projects. With its ability to create endless radial patterns, manipulate size and position, and use keyframe animations, this component opens up new possibilities for creating dynamic and interactive backgrounds. ###### Resources [Browse all](../resources) [Resources Sep 30, 2023 Our favorite Framer website templates in September Monika 0m](../our-favorite-templates-in-september/) [Resources Aug 30, 2023 Our favorite templates in August Monika 0m](../our-favorite-templates-in-august/) [Resources Aug 23, 2023 Framer’s documentation toolkit: CMS, Search, Templates & more Monika 0m](../documentation-in-framer/) [Resources Aug 11, 2023 Create a horizontal scroll website Paul 0m](../horizontal-scroll-website/) ## Your next idea starts here Create personal portfolio, Build startup site, `Launch landing page`, Start company blog [Start without AI](https://framer.com/signup) --- ## Navigation - [Enterprise](../../enterprise/) - [Pricing](../../pricing) - [Log in](https://framer.com/r/login) - [Sign up](https://www.framer.com/r/signup/) - [Brand guidelines](../../brand) - [AI](../../ai/) - [Agents](../../agents/) - [External Agents](../../agents/external/) - [Design](../../design/) - [Collaborate](../../collaborate/) - [CMS](../../cms/) - [Hosting](../../hosting/) - [Performance](../../performance/) - [SEO](../../seo/) - [Skills New](../../skills) - [Convert](../../convert/) - [Publish](../../publish/) - [Updates](../../updates) - [Templates](https://www.framer.com/community/marketplace/templates/) - [Components](https://www.framer.com/community/marketplace/components/) - [Vectors](https://www.framer.com/community/marketplace/vectors/) - [Plugins](https://www.framer.com/community/marketplace/plugins/) - [Gallery](https://www.framer.com/community/gallery/) - [Hire Experts](https://www.framer.com/community/members/) - [Switch](../../switch/) - [Agencies](../../agencies/) - [Startups](../../startups/) - [Academy](../../academy/) - [Desktop App](../../downloads/) - [Developers](../../developers/) - [Affiliates](../../creators) - [Experts New](../../expert/apply/) - [Guides](../../guides) - [Blog](../) - [Newsletter](../../newsletter) - [Stories](../../stories/) - [Students](../../education/students/) - [Ambassadors](../../education/ambassadors/) - [Help Articles](../../help/) - [Meetups](../../meetups/) - [Contact](../../contact/) - [Designers](../../solutions/designers/) - [Agencies](../../solutions/agencies/) - [Marketers](../../solutions/marketers/) - [Growth](../../solutions/growth/) - [Builders](../../solutions/builders/) - [Engineers](../../solutions/engineers/) - [Site Teams](../../solutions/site-teams/) - [Founders](../../solutions/founders/) - [AI website builder](../../solutions/ai-website-builder/) - [AI design agent](../../solutions/ai-designer/) - [Website builder](../../solutions/website-builder/) - [Landing pages](../../solutions/landing-pages/) - [Portfolio maker](../../solutions/portfolio-website/) - [UI/UX design](../../solutions/ui-ux-design/) - [Figma to HTML](../../solutions/figma-to-html/) - [No-code](../../solutions/no-code-website-builder/) - [Compare](../../compare) - [Webflow](../../compare/framer-vs-webflow) - [Figma](../../compare/framer-vs-figma) - [Wix](../../compare/framer-vs-wix) - [Squarespace](../../compare/framer-vs-squarespace) - [WordPress](../../compare/framer-vs-wordpress) - [Readymag](../../compare/framer-vs-readymag) - [Ceros](../../compare/framer-vs-ceros) - [Unbounce](../../compare/framer-vs-unbounce) - [Lovable](../../compare/framer-vs-lovable) - [Claude Code](../../compare/framer-vs-claude-code) - [ChatGPT](../../compare/framer-vs-chatgpt) - [Codex](../../compare/framer-vs-codex) - [Contentful](../../compare/framer-vs-contentful) - [Sanity](../../compare/framer-vs-sanity) - [AEM](../../compare/framer-vs-adobe-experience-manager) - [Replit](../../compare/framer-vs-replit) - [v0](../../compare/framer-vs-v0) - [Careers](../../careers/) - [Security](../../legal/security) - [Brand](../../brand) - [Abuse](mailto:abuse@framer.com) - [Legal](../../legal/community-terms) - [Trust](https://app.eu.vanta.com/framer.com/trust/ow67ujg7iav0t6qtd1o6r2) - [Merch](../../store) - [Keyboard](../../f1) - [Stack Score](../../stack-score/) - [Free domains](../../domains/) - [AEO scanner](../../aeo) - [State of Sites](https://www.framer.com/state-of-sites-2026/) - [CanvasBench](../../canvasbench/) - [Link Preview](https://www.linkpreview.app/) - [Checking status](https://www.framerstatus.com/)