diff --git a/changelogs/upcoming/7525.md b/changelogs/upcoming/7525.md
new file mode 100644
index 00000000000..7bbd4785cfb
--- /dev/null
+++ b/changelogs/upcoming/7525.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering in some SSR environments, particularly Next.js v13 and up
diff --git a/src/components/page_template/page_template.tsx b/src/components/page_template/page_template.tsx
index e99361f7145..9f9b4b959f4 100644
--- a/src/components/page_template/page_template.tsx
+++ b/src/components/page_template/page_template.tsx
@@ -141,7 +141,7 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
     restrictWidth,
     paddingSize,
     // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
-    parent: `#${CSS.escape(pageInnerId)}`,
+    parent: `#${pageInnerId.replaceAll(':', '\\:')}`,
   });
 
   const innerPanelled = () => panelled ?? Boolean(sidebar.length > 0);