How to create a 404 page in Webflow?

A custom 404 page ensures visitors who land on a broken or removed link still get a useful experience instead of a generic browser error. Webflow makes it straightforward to design and publish one.

Setting Up Your Custom 404 Page

Every Webflow project includes a built-in 404 page template. You will find it in the Pages panel on the left sidebar, listed under Utility Pages at the bottom. Click on "404 Page" to open it in the Designer.

From here, you can design the page just like any other static page. Common elements to include:

• A clear message explaining the page was not found

• A link or button back to the homepage

• A search bar or navigation menu

• Branding consistent with the rest of the site

Key details to keep in mind:

• The 404 page is a static page — it cannot use CMS bindings or dynamic content

• You can add interactions and animations the same way you would on any other page

• The page URL is automatically set to /404 and cannot be changed

• Changes to the 404 page only take effect after you publish the site

Publishing and Testing

Once your design is complete, publish the site. To test, visit any nonexistent URL on your domain — for example, yourdomain.com/this-does-not-exist. You should see your custom 404 page.

Note: The 404 page does not render in the Designer preview the same way it does on the live site. Always test on the published domain.

If you have a staging subdomain, publish there first to verify the design before pushing to the production domain.