diff --git a/src/components/error_boundary/_error_boundary.scss b/src/components/error_boundary/_error_boundary.scss
deleted file mode 100644
index 8b962f056db..00000000000
--- a/src/components/error_boundary/_error_boundary.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.euiErrorBoundary {
-  $color1: transparentize($euiColorDanger, .75);
-  $color2: transparentize($euiColorDanger, .95);
-
-  background: repeating-linear-gradient(
-    45deg,
-    $color1,
-    $color1 1px,
-    $color2 1px,
-    $color2 20px
-  );
-  padding: $euiSize;
-}
diff --git a/src/components/error_boundary/_index.scss b/src/components/error_boundary/_index.scss
deleted file mode 100644
index e0dab3ec511..00000000000
--- a/src/components/error_boundary/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'error_boundary';
diff --git a/src/components/error_boundary/error_boundary.styles.ts b/src/components/error_boundary/error_boundary.styles.ts
new file mode 100644
index 00000000000..8b6b3c42a7d
--- /dev/null
+++ b/src/components/error_boundary/error_boundary.styles.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { transparentize, UseEuiTheme } from '../../services';
+
+export const euiErrorBoundaryStyles = ({ euiTheme }: UseEuiTheme) => {
+  const color1 = transparentize(euiTheme.colors.danger, 0.25);
+  const color2 = transparentize(euiTheme.colors.danger, 0.05);
+
+  return {
+    euiErrorBoundary: css`
+      background-image: repeating-linear-gradient(
+        45deg,
+        ${color1},
+        ${color1} 1px,
+        ${color2} 1px,
+        ${color2} 19px
+      );
+      background-size: 54px 54px; // Fix for Safari 15.4+
+      ${logicalCSS('padding-horizontal', euiTheme.size.base)};
+      ${logicalCSS('padding-vertical', euiTheme.size.base)};
+    `,
+  };
+};
diff --git a/src/components/error_boundary/error_boundary.tsx b/src/components/error_boundary/error_boundary.tsx
index da8d9a17195..5ab225b8161 100644
--- a/src/components/error_boundary/error_boundary.tsx
+++ b/src/components/error_boundary/error_boundary.tsx
@@ -7,12 +7,15 @@
  */
 
 import React, { Component, HTMLAttributes, ReactNode } from 'react';
-import { CommonProps } from '../common';
 import classNames from 'classnames';
+import { CommonProps } from '../common';
 
 import { EuiTitle } from '../title';
 import { EuiCodeBlock } from '../code';
 import { EuiI18n } from '../i18n';
+import { withEuiTheme, WithEuiThemeProps } from '../../services';
+
+import { euiErrorBoundaryStyles } from './error_boundary.styles';
 
 interface EuiErrorBoundaryState {
   hasError: boolean;
@@ -27,11 +30,13 @@ export type EuiErrorBoundaryProps = CommonProps &
     children: ReactNode;
   };
 
-export class EuiErrorBoundary extends Component<
-  EuiErrorBoundaryProps,
+type EuiErrorBoundaryExtendedProps = EuiErrorBoundaryProps & WithEuiThemeProps;
+
+export class _EuiErrorBoundary extends Component<
+  EuiErrorBoundaryExtendedProps,
   EuiErrorBoundaryState
 > {
-  constructor(props: EuiErrorBoundaryProps) {
+  constructor(props: EuiErrorBoundaryExtendedProps) {
     super(props);
 
     const errorState: EuiErrorBoundaryState = {
@@ -57,14 +62,22 @@ ${stackStr}`;
   }
 
   render() {
-    const { children, 'data-test-subj': _dataTestSubj, ...rest } = this.props;
+    const {
+      className,
+      children,
+      'data-test-subj': _dataTestSubj,
+      theme,
+      ...rest
+    } = this.props;
     const dataTestSubj = classNames('euiErrorBoundary', _dataTestSubj);
+    const styles = euiErrorBoundaryStyles(theme);
 
     if (this.state.hasError) {
       // You can render any custom fallback UI
       return (
         <div
-          className="euiErrorBoundary"
+          css={styles.euiErrorBoundary}
+          className={classNames('euiErrorBoundary', className)}
           data-test-subj={dataTestSubj}
           {...rest}
         >
@@ -83,3 +96,7 @@ ${stackStr}`;
     return children;
   }
 }
+
+export const EuiErrorBoundary = withEuiTheme<EuiErrorBoundaryProps>(
+  _EuiErrorBoundary
+);
diff --git a/src/components/index.scss b/src/components/index.scss
index de44cbc2673..5129940d615 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -18,7 +18,6 @@
 @import 'description_list/index';
 @import 'drag_and_drop/index';
 @import 'empty_prompt/index';
-@import 'error_boundary/index';
 @import 'filter_group/index';
 @import 'flex/index';
 @import 'flyout/index';
diff --git a/upcoming_changelogs/6053.md b/upcoming_changelogs/6053.md
new file mode 100644
index 00000000000..3cb19e442ea
--- /dev/null
+++ b/upcoming_changelogs/6053.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiErrorBoundary` to Emotion
\ No newline at end of file