Quick summary
Adding custom CSS in Webflow lets you extend styles beyond the visual editor by injecting code through the Project Settings or Page Settings custom code panels. CSS added at the project level applies to all pages, while page-level custom code targets a single page only.
Steps
- From the Webflow dashboard, locate your project thumbnail and click the three-dot icon to view project options.
- Click Settings to open the project settings panel.
- From the left sidebar, navigate to the Custom Code section.
- Review the available sections: head, body, and footer code injection areas.
- Add your CSS inside the Head section wrapped in <style> and </style> tags — do not include <head> tags, as the editor adds these automatically.
- Validate and save your changes — note that code added here applies to all pages of the project.
- To apply CSS to a specific page, open the Webflow editor and go to the Pages tab in the left sidebar.
- Hover over the target page name to reveal the gear icon, then click it to open page settings.
- Scroll to the bottom of the panel to find the Custom Code section and click to expand it.
- Add your CSS inside the Head section using <style> and </style> tags, omitting the <head> tags.
- Save your changes and publish the project to push the custom CSS live.
