diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index c27572e735ee1e..de11f6fafe0010 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -1141,13 +1141,42 @@ public function get_custom_css() {
 		// Add the global styles root CSS.
 		$stylesheet = _wp_array_get( $this->theme_json, array( 'styles', 'css' ), '' );
 
+		// Add the global styles element CSS.
+		if ( isset( $this->theme_json['styles']['elements'] ) ) {
+			foreach ( $this->theme_json['styles']['elements'] as $element => $node ) {
+				$custom_element_css = _wp_array_get( $this->theme_json, array( 'styles', 'elements', $element, 'css' ) );
+				if ( $custom_element_css ) {
+					$selector    = static::ELEMENTS[ $element ];
+					$stylesheet .= $this->process_blocks_custom_css( $custom_element_css, $selector );
+				}
+			}
+		}
+
 		// Add the global styles block CSS.
 		if ( isset( $this->theme_json['styles']['blocks'] ) ) {
 			foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) {
 				$custom_block_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'css' ) );
 				if ( $custom_block_css ) {
-					$selector    = static::$blocks_metadata[ $name ]['selector'];
-					$stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector );
+					// Only use the class for the default style variation if the block has style variations.
+					if ( isset( static::$blocks_metadata[ $name ]['styleVariations'] ) ) {
+						// Add the block selector and the .is-style-default style variation class.
+						$selector    = static::$blocks_metadata[ $name ]['selector'] . ', ' . static::$blocks_metadata[ $name ]['styleVariations']['default'];
+						$stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector );
+					} else {
+						// Add the block selector.
+						$selector    = static::$blocks_metadata[ $name ]['selector'];
+						$stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector );
+					}
+				}
+				if ( isset( $this->theme_json['styles']['blocks'][ $name ]['variations'] ) ) {
+					foreach ( $this->theme_json['styles']['blocks'][ $name ]['variations'] as $variation_name => $node ) {
+						$custom_variation_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'variations', $variation_name, 'css' ) );
+						if ( $custom_variation_css && 'default' !== $variation_name ) {
+							// Add the variation selectors, excluding the default variation.
+							$variation_selector = static::$blocks_metadata[ $name ]['styleVariations'][ $variation_name ];
+							$stylesheet        .= $this->process_blocks_custom_css( $custom_variation_css, $variation_selector );
+						}
+					}
 				}
 			}
 		}
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index 55dbab06de1529..75ab0ea0c0171f 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -1174,9 +1174,25 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			},
 		];
 
+		// Loop through the elements to check if there are custom CSS values.
+		// If there are, push the selector together with
+		// the CSS value to the 'styles' array.
+		Object.entries( ELEMENTS ).forEach( ( element ) => {
+			const [ name, elementsSelector ] = element;
+			if ( mergedConfig.styles.elements[ name ]?.css ) {
+				styles.push( {
+					css: processCSSNesting(
+						mergedConfig.styles.elements[ name ]?.css,
+						elementsSelector
+					),
+					isGlobalStyles: true,
+				} );
+			}
+		} );
+
 		// Loop through the blocks to check if there are custom CSS values.
 		// If there are, get the block selector and push the selector together with
-		// the CSS value to the 'stylesheets' array.
+		// the CSS value to the 'styles' array.
 		getBlockTypes().forEach( ( blockType ) => {
 			if ( mergedConfig.styles.blocks[ blockType.name ]?.css ) {
 				const selector = blockSelectors[ blockType.name ].selector;
@@ -1188,6 +1204,26 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 					isGlobalStyles: true,
 				} );
 			}
+
+			/* CSS for block style variations */
+			if ( mergedConfig.styles.blocks[ blockType.name ]?.variations ) {
+				Object.entries(
+					mergedConfig.styles.blocks[ blockType.name ]?.variations
+				).forEach( ( variation ) => {
+					if ( variation[ 1 ].css && 'default' !== variation[ 0 ] ) {
+						const variationSelector =
+							blockSelectors[ blockType.name ]
+								.styleVariationSelectors[ variation[ 0 ] ];
+						styles.push( {
+							css: processCSSNesting(
+								variation[ 1 ].css,
+								variationSelector
+							),
+							isGlobalStyles: true,
+						} );
+					}
+				} );
+			}
 		} );
 
 		return [ styles, mergedConfig.settings ];