CDN Stuck on Old CSS After Deploy? Here's the Fix

You Deployed New CSS but the Site Looks Broken. Yeah, That's the CDN.

It's happened to everyone. You push a CSS change to production, refresh the browser, and nothing. The old styles are still there. Maybe the layout is off, colors are wrong, or a component is just gone. Your first thought: Did I even upload the file? You check the server. The new CSS is there, timestamp and all. But the browser pulls the old one from the CDN.

CDNs cache static assets like CSS to speed up load times. But when you update a file, the CDN doesn't know unless you tell it. That's your problem. I had a client last month who spent an hour debugging a missing button style. It was the CDN cache. So here's how to fix it, from quickest to most thorough.

1. The 30-Second Fix: Hard Refresh Your Browser

Yes, it's simple. But you'd be surprised how many people skip it. A regular refresh won't always bypass the CDN cache. You need a hard refresh. Here's how:

• Windows/Linux: Ctrl + Shift + R
• Mac: Cmd + Shift + R
• Or hold Shift and click the refresh button in your browser.

This tells the browser to ignore its local cache and fetch everything fresh from the CDN. If the CDN itself still has the old file hard-cached, this won't fix it. But it's the first thing to try. Had a client last week whose dev was pulling his hair out. A hard refresh fixed it. Took 10 seconds.

2. The 5-Minute Fix: Add a Version Query String

If the hard refresh worked but then the old CSS came back after a few minutes, the CDN is caching on its side. The best way to fix this permanently is to change the file name or add a version parameter. Here's the trick:

Instead of linking style.css, link style.css?v=2 or use a timestamp like style.css?v=20250315. The CDN sees that as a different URL, so it fetches the new file.

I do this in my HTML templates:

<link rel="stylesheet" href="/css/style.css?v={{ build_number }}">

If you use a build tool like Webpack or Vite, they add a hash in the filename automatically. For example, style.a1b2c3.css. That's the same idea. If you're not using a build tool, just manually update the version number every time you change the file.

A client who used WordPress had this issue — their caching plugin added versioning but the CDN ignored it. Simple fix: added ?v= to the CSS URL in the theme's header.php. Problem solved.

3. The 15+ Minute Fix: Purge the CDN Cache

If versioning isn't an option, or you're dealing with a broken deploy and need the fix now, you need to purge the CDN's cache completely. This is CDN-specific, but here's the general process.

Cloudflare

1. Log into your Cloudflare dashboard.
2. Go to Caching > Configuration.
3. Click Purge Everything or Custom Purge and type the URL of the CSS file.

AWS CloudFront

1. Go to CloudFront in the AWS console.
2. Select your distribution.
3. Create an Invalidation — enter paths like /css/* or /style.css.
4. Wait a few minutes for it to propagate.

Fastly

1. Use the API or the dashboard. In the dashboard, go to Purge.
2. Choose Purge by URL or Purge All.

I once used CloudFront and forgot to purge after a deploy. The site was broken for hours. Learned the hard way. Now I set up a script that purges on every deploy. If you're using GitHub Actions or Jenkins, add a step that runs the CDN purge automatically. Saves you from this headache.

Set Proper Cache-Control Headers

If you don't want to purge manually every time, set your CDN to cache CSS for a short time, like 5 minutes, during development. In your server config, add:

Cache-Control: public, max-age=300

That gives you a 5-minute window where the CDN caches the file. After that, it checks for a new version. For production, you can set it longer, like a day, but only if you use versioned filenames.

Which Fix Should You Use?

Here's my rule of thumb:

• Hard refresh — try first, always.
• Version query string — best long-term fix. Do it on every project.
• CDN purge — for emergencies or when versioning isn't possible.

And if you're running a site with frequent updates, set up automated purging or versioning from day one. It's one of those things that only hurts once if you do it right.

That's it. Next time your CSS doesn't update, you know where to look.