https://cssstudio.ai/pricing

1<!DOCTYPE html><html lang="en"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="preload" as="image" href="https://api.motion.dev/score/badge?url=cssstudio.ai"/><meta property="og:type" content="website"/><meta property="og:url" content="https://cssstudio.ai/pricing"/><meta property="og:site_name" content="CSS Studio"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@motiondotdev"/><link rel="canonical" href="https://cssstudio.ai/pricing"/><link rel="icon" type="image/png" href="https://images.motion.dev/cssstudio/favicon.png"/><title>Pricing | CSS Studio</title><meta name="description" content="One tool, one price, no subscription. Get CSS Studio for a one-time payment with lifetime updates included."/><link rel="canonical" href="https://cssstudio.ai/pricing"/><meta property="og:type" content="website"/><meta property="og:url" content="https://cssstudio.ai/pricing"/><meta property="og:title" content="Pricing | CSS Studio"/><meta property="og:description" content="One tool, one price, no subscription. Get CSS Studio for a one-time payment with lifetime updates included."/><meta property="og:image" content="https://api.motion.dev/cssstudio/og/page/pricing.png?kicker=PRICING&amp;title=One+price.+No+subscription.&amp;description=One+tool%2C+one+price%2C+no+subscription.+Get+CSS+Studio+for+a+one-time+payment+with+lifetime+updates+included."/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Pricing | CSS Studio"/><meta name="twitter:description" content="One tool, one price, no subscription. Get CSS Studio for a one-time payment with lifetime updates included."/><meta name="twitter:image" content="https://api.motion.dev/cssstudio/og/page/pricing.png?kicker=PRICING&amp;title=One+price.+No+subscription.&amp;description=One+tool%2C+one+price%2C+no+subscription.+Get+CSS+Studio+for+a+one-time+payment+with+lifetime+updates+included."/><link rel="modulepreload" href="/assets/manifest-d60f5ace.js"/><link rel="modulepreload" href="/assets/entry.client-D3PLVrLe.js"/><link rel="modulepreload" href="/assets/chunk-6CSD65Y2-B9EdUb7a.js"/><link rel="modulepreload" href="/assets/index-CCCltmCc.js"/><link rel="modulepreload" href="/assets/commerce-DWMk_wrg.js"/><link rel="modulepreload" href="/assets/root-Bekvvr8d.js"/><link rel="modulepreload" href="/assets/jsonld-8TaA4Lhi.js"/>

1<link rel="modulepreload" href="/assets/paddle-Cnkz_qFg.js"/><link rel="modulepreload" href="/assets/SiteLayout-wBW6mGYB.js"/><link rel="modulepreload" href="/assets/preload-helper-BqwDjHwv.js"/><link rel="modulepreload" href="/assets/FreshPageHeader-DElTvGoA.js"/><link rel="modulepreload" href="/assets/LogoIcon-TjMDZPsr.js"/><link rel="modulepreload" href="/assets/react-B8LPdxm0.js"/><link rel="modulepreload" href="/assets/analytics-JRE8brIE.js"/><link rel="modulepreload" href="/assets/index-CQRcZABO.js"/><link rel="modulepreload" href="/assets/Pricing-BqmqSuiU.js"/><link rel="modulepreload" href="/assets/use-pricing-cb_rk1O6.js"/><link rel="modulepreload" href="/assets/PageMeta-DAbMhs77.js"/><link rel="modulepreload" href="/assets/og-image-ByUBHaqS.js"/>

1<script defer="" src="https://analytics.motion.dev/tracker.js" data-site="cssstudio.ai"></script>

1<link rel="stylesheet" href="/assets/modal-DETLyg4u.css"/><link rel="stylesheet" href="/assets/fonts-Ir3xnMba.css"/><link rel="stylesheet" href="/assets/tokens-C3SnG_10.css"/><link rel="stylesheet" href="/assets/globals-DcP5T3YM.css"/><link rel="stylesheet" href="/assets/buttons-Bv_JTzCm.css"/><link rel="stylesheet" href="/assets/app-shell-OiVm2NEm.css"/><link rel="stylesheet" href="/assets/footer-BStkzQSA.css"/><link rel="stylesheet" href="/assets/docs-FHiyAXs_.css"/><link rel="stylesheet" href="/assets/code-highlight-MdcKM-cu.css"/><link rel="stylesheet" href="/assets/shiki-DpN1fM6b.css"/><link rel="stylesheet" href="/assets/styles-DCkibkUM.css"/><link rel="stylesheet" href="/assets/buttons-CHMqNFgN.css"/><link rel="stylesheet" href="/assets/root-5TVvATIG.css"/><link rel="stylesheet" href="/assets/Pricing-bVTq4r9Z.css"/>

1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://motion.dev/#org","name":"Motion","url":"https://motion.dev","logo":"https://images.motion.dev/cssstudio/favicon.png","sameAs":["https://x.com/motiondotdev","https://github.com/motiondivision","https://www.youtube.com/@motiondotdev"]},{"@type":"WebSite","@id":"https://cssstudio.ai/#website","url":"https://cssstudio.ai","name":"CSS Studio","publisher":{"@id":"https://motion.dev/#org"}},{"@type":"SoftwareApplication","name":"CSS Studio","url":"https://cssstudio.ai","applicationCategory":"DesignApplication","operatingSystem":"Web","description":"A visual CSS editor in your browser. Adjust styles with sliders and pickers, and your AI agent writes every change into source code.","offers":{"@type":"Offer","price":"99","priceCurrency":"USD"},"creator":{"@id":"https://motion.dev/#org"}}]}</script>

1</head><body><div class="app fresh-system" data-scheme="indigo" data-mode="dark"><nav class="fresh-site-navigation studio-site-nav fresh-system site-fresh-nav--content" aria-label="Site" data-placement="global"><a class="fresh-site-navigation-brand" href="/" aria-label="CSS Studio home"><svg width="33" height="11.709509541081848" viewBox="0 0 25.364 9" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M 9.587 0 L 4.57 9 L 0 9 L 3.917 1.972 C 4.524 0.883 6.039 0 7.301 0 Z M 20.794 2.25 C 20.794 1.007 21.817 0 23.079 0 C 24.341 0 25.364 1.007 25.364 2.25 C 25.364 3.493 24.341 4.5 23.079 4.5 C 21.817 4.5 20.794 3.493 20.794 2.25 Z M 10.443 0 L 15.013 0 L 9.997 9 L 5.427 9 Z M 15.841 0 L 20.411 0 L 16.494 7.028 C 15.887 8.117 14.372 9 13.11 9 L 10.825 9 Z" fill="currentColor"></path></svg><span>CSS Studio</span></a><div class="fresh-site-navigation-links"><a href="/learn" aria-label="Learn"><span class="fresh-rolling-text" aria-hidden="true"><span class="fresh-rolling-text-copy" style="transform:translateY(0%)">Learn</span><span class="fresh-rolling-text-copy fresh-rolling-text-copy--incoming" style="transform:translateY(-100%)">Learn</span></span></a><a href="/pricing" aria-label="Pricing"><span class="fresh-rolling-text" aria-hidden="true"><span class="fresh-rolling-text-copy" style="transform:translateY(0%)">Pricing</span><span class="fresh-rolling-text-copy fresh-rolling-text-copy--incoming" style="transform:translateY(-100%)">Pricing</span></span></a></div><div class="fresh-site-navigation-actions"><a class="fresh-primary-action" href="/pricing" data-discover="true"><span class="fresh-primary-action-content"><span>Get CSS Studio</span></span><span class="fresh-primary-action-content fresh-primary-action-content--hover" aria-hidden="true" data-nosnippet=""><span>Get CSS Studio</span></span></a></div></nav><main class="app-main studio-site-main"><div class="pricing"><div class="pricing-shell"><header class="pricing-header"><h1>Pricing</h1><p>Pay once, own it forever.<br/>Every future update included.</p></header><div class="fresh-pricing-board pricing-board" aria-label="CSS Studio pricing" style="--fresh-pricing-columns:2"><article class="fresh-pricing-plan" data-featured="true"><header><span>01</span><span>Recommended</span></header><div class="fresh-pricing-plan-title"><h3>Personal</h3><p>Visual CSS editor with an AI agent bridge. Every future update included.</p></div><div class="fresh-pricing-price"><strong><span class="pricing-price-skeleton" aria-hidden="true"></span></strong><span>Once</span></div><ul><li><span aria-hidden="true">+</span><span>Visual CSS editor</span></li><li><span aria-hidden="true">+</span><span>Animation editor</span></li><li><span aria-hidden="true">+</span><span>CSS variable support</span></li><li><span aria-hidden="true">+</span><span>Sync with agent via MCP</span></li><li><span aria-hidden="true">+</span><span>Lifetime updates included</span></li></ul><div class="fresh-pricing-plan-action"><button class="fresh-primary-action" type="button"><span class="fresh-primary-action-content"><span>Get CSS Studio</span></span><span class="fresh-primary-action-content fresh-primary-action-content--hover" aria-hidden="true" data-nosnippet=""><span>Get CSS Studio</span></span></button></div></article><article class="fresh-pricing-plan"><header><span>02</span><span>For teams</span></header><div class="fresh-pricing-plan-title"><h3>Team</h3><p>One-time purchase for 5 seats at the same email domain.</p></div><div class="fresh-pricing-price"><strong><span class="pricing-price-skeleton" aria-hidden="true"></span></strong><span>5 seats</span></div><ul><li><span aria-hidden="true">+</span><span>Everything in Personal</span></li><li><span aria-hidden="true">+</span><span>5 seats, same email domain</span></li><li><span aria-hidden="true">+</span><span>Admin-managed access</span></li><li><span aria-hidden="true">+</span><span>Lifetime updates included</span></li></ul><div class="fresh-pricing-plan-action"><button class="fresh-primary-action" type="button"><span class="fresh-primary-action-content"><span>Get team access</span></span><span class="fresh-primary-action-content fresh-primary-action-content--hover" aria-hidden="true" data-nosnippet=""><span>Get team access</span></span></button></div></article></div><section class="pricing-faq" aria-label="Frequently asked questions"><header class="fresh-section-heading"><div class="fresh-section-index"><span aria-hidden="true">01</span><span aria-hidden="true">FAQ</span></div><div class="fresh-section-copy"><h2>Frequently asked questions</h2><p>

1Pricing, licensing, and access, answered.</p></div></header><div class="fresh-faq-table pricing-faq-table" data-variant="open"><table><caption>CSS Studio frequently asked questions</caption><colgroup><col class="fresh-faq-col-question"/><col/></colgroup><thead><tr><th scope="col">Question</th><th scope="col">Answer</th></tr></thead><tbody><tr><th scope="row">What agents does CSS Studio work with?</th><td>CSS Studio has been developed with Cursor, Claude Code, and VS Code using a variety of models like Composer, Haiku, Sonnet, Opus, GPT and more. It works with any agent that supports MCPs and Skills.</td></tr><tr><th scope="row">Don&#x27;t I need to pay for AI editing?</th><td>CSS Studio is the visual editing interface. You bring your own AI agent (like Cursor or Claude Code) which handles the changes to your source files. Some models are free, whereas some are paid.</td></tr><tr><th scope="row">Is there a free trial?</th><td>Not currently. CSS Studio is a one-time $99 purchase with a full refund available within 14 days. You can install CSS Studio for free on any website and use it as a visual editor without the AI updates.</td></tr><tr><th scope="row">What does lifetime updates include?</th><td>Your one-time purchase includes all future updates to CSS Studio&#x27;s core features. Optional content libraries, marketplace features, or cloud-hosted services may be offered separately in the future, but the software you buy today will always keep getting better at no extra cost.</td></tr><tr><th scope="row">How does the team plan work?</th><td>The team plan includes 5 seats for members at the same email domain. The team admin manages seats from their account page. Need more seats? Purchase another team license to add 5 more.</td></tr><tr id="refund-policy"><th scope="row">What is your refund policy?</th><td>Full refund within 14 days of purchase. Contact us at [email protected].</td></tr></tbody></table></div><p class="pricing-faq-contact">Still have questions?<!-- --> <a href="/learn" data-discover="true">Check the docs</a></p></section></div></div></main><footer class="footer fresh-system" data-mode="light" style="--background:var(--lab-paper);--foreground:var(--lab-ink);--foreground-feint:var(--lab-muted);--layer:var(--lab-paper);--border:color-mix(in oklch, var(--lab-ink) 18%, transparent);--accent:var(--studio-accent);--on-accent:var(--lab-ink);--error:var(--lab-watermelon);--footer-accent:var(--studio-accent);--footer-action-foreground:var(--lab-ink);--footer-margin-top:0px;--footer-margin-top-mobile:0px"><div class="footer-container"><div class="fnl-inline"><div class="fnl-inline-text"><h3 class="fnl-heading">Newsletter</h3><p class="fnl-desc">Subscribe to the newsletter</p></div><div class="fnl-inline-form"><form class="fresh-newsletter-form" data-state="idle"><label class="fresh-newsletter-input-shell" style="opacity:1"><span aria-hidden="true">&gt;</span><input aria-label="Email address" autoComplete="email" class="fresh-newsletter-input" placeholder="[email protected]" required="" type="email" name="email" value=""/></label><button class="fresh-newsletter-action" type="submit"><span class="fresh-newsletter-action-fill" aria-hidden="true"></span><span class="fresh-newsletter-action-content"><span style="clip-path:inset(0 0% 0 0)">Subscribe</span></span></button><p class="fresh-newsletter-status" aria-live="polite"></p></form></div></div><nav class="footer-nav" data-columns="3"><section class="footer-nav-section"><h6 class="footer-nav-heading">CSS Studio</h6><ul class="footer-nav-list"><li><a href="/learn" data-discover="true">Learn</a></li><li><a href="/pricing" data-discover="true">Pricing</a></li><li><a href="/terms" data-discover="true">Terms</a></li><li><a href="/privacy" data-discover="true">Privacy</a></li><li><a href="/terms#refund-policy" data-discover="true">Refund policy</a></li></ul></section><section class="footer-nav-section"><h6 class="footer-nav-heading">Products</h6><ul class="footer-nav-list"><li><a href="https://motion.dev/docs/ai-kit">AI Kit</a></li><li><a href="https://motion.dev">Motion</a></li><li><a href="https://motion.dev/plus">Motion+</a></li><li><a href="https://score.motion.dev">MotionScore</a></li><li><a href="https://book.motion.dev">The Book of Motion</a></li></ul></section><section class="footer-nav-section"><h6 class="footer-nav-heading">Social</h6><ul class="footer-nav-list"><li><a href="https://github.com/motiondivision/css-studio-public" target="_blank" rel="noopener">GitHub</a></li><li><a href="https://x.com/motiondotdev" target="_blank" rel="noopener nofollow">X/Twitter</a></li></ul></section></nav><div class="footer-bottom"><p class="footer-copyright">© 2026 Motion Division</p><div class="footer-badge"><a href="https://score.motion.dev/site/cssstudio.ai"><img src="https://api.motion.dev/score/badge?url=cssstudio.ai" alt="MotionScore"/></a></div></div></div></footer></div>

1<script>((storageKey2, restoreKey) => {
2    if (!window.history.state || !window.history.state.key) {
3      let key = Math.random().toString(32).slice(2);
4      window.history.replaceState({ key }, "");
5    }
6    try {
7      let positions = JSON.parse(sessionStorage.getItem(storageKey2) || "{}");
8      let storedY = positions[restoreKey || window.history.state.key];
9      if (typeof storedY === "number") {
10        window.scrollTo(0, storedY);
11      }
12    } catch (error) {
13      console.error(error);
14      sessionStorage.removeItem(storageKey2);
15    }
16  })("react-router-scroll-positions", null)</script>

16<script>window.__reactRouterContext = {"basename":"/","future":{"unstable_optimizeDeps":false,"unstable_passThroughRequests":false,"unstable_subResourceIntegrity":false,"unstable_trailingSlashAwareDataRequests":false,"unstable_previewServerPrerendering":false,"v8_middleware":false,"v8_splitRouteModules":false,"v8_viteEnvironmentApi":true},"routeDiscovery":{"mode":"initial"},"ssr":true,"isSpaMode":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());</script>

16<script type="module" async="">import "/assets/manifest-d60f5ace.js";
17import * as route0 from "/assets/root-Bekvvr8d.js";
18import * as route1 from "/assets/SiteLayout-wBW6mGYB.js";
19import * as route2 from "/assets/Pricing-BqmqSuiU.js";
20  
21  window.__reactRouterRouteModules = {"root":route0,"components/SiteLayout":route1,"pages/Pricing":route2};
22
23import("/assets/entry.client-D3PLVrLe.js");</script>

23<script>(function () {if (window.__motionPaddle) return;window.__motionPaddle = new Promise(function (resolve) {var script = document.createElement("script");script.src = "https://cdn.paddle.com/paddle/v2/paddle.js";script.async = true;script.onload = function () {try {var paddle = window.Paddle;var sandbox = ["motion.dev","site.motion.dev","examples.motion.dev","score.motion.dev","cssstudio.ai"].indexOf(window.location.hostname) < 0;if (sandbox) paddle.Environment.set("sandbox");paddle.Initialize({ token: sandbox ? "test_f13ee42b11c40741091a279744c" : "live_e629c1567996e680925324dfb66", pwCustomer: sandbox ? undefined : {} });resolve(true);} catch (error) {resolve(false);}};script.onerror = function () {script.remove();resolve(false);};document.head.appendChild(script);});})();</script>

23<!--$-->

23<script>window.__reactRouterContext.streamController.enqueue("[{\"_1\":2,\"_3\":-5,\"_4\":-5},\"loaderData\",{},\"actionData\",\"errors\"]\n");</script>

23<!--$-->

23<script>window.__reactRouterContext.streamController.close();</script>

23<!--/$--><!--/$-->

23<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"f9b2132a2079456f8c995e121f6807f9","r":1,"spa":2}' crossorigin="anonymous"></script>

23
24</body></html>