diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
index 11c68d480c57b..81487d978e058 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
@@ -28,9 +28,12 @@ import {
 	userCanConnectSite,
 	userIsSubscriber,
 	getConnectionErrors,
+	getSiteAdminUrl,
 } from 'state/initial-state';
 import { getLicensingError, clearLicensingError } from 'state/licensing';
+import { getModule } from 'state/modules';
 import { getSiteDataErrors } from 'state/site';
+import { StartFreshDeprecationWarning } from '../../writing/custom-css';
 import DismissableNotices from './dismissable';
 import JetpackConnectionErrors from './jetpack-connection-errors';
 import PlanConflictWarning from './plan-conflict-warning';
@@ -234,6 +237,11 @@ class JetpackNotices extends React.Component {
 						onDismissClick={ this.props.clearLicensingError }
 					/>
 				) }
+				{ this.props.startFreshEnabled && (
+					<SimpleNotice status="is-warning" showDismiss={ false }>
+						<StartFreshDeprecationWarning siteAdminUrl={ this.props.siteAdminUrl } />
+					</SimpleNotice>
+				) }
 			</div>
 		);
 	}
@@ -258,6 +266,8 @@ export default connect(
 			isReconnectingSite: isReconnectingSite( state ),
 			licensingError: getLicensingError( state ),
 			hasConnectedOwner: hasConnectedOwner( state ),
+			siteAdminUrl: getSiteAdminUrl( state ),
+			startFreshEnabled: !! getModule( state, 'custom-css' )?.options?.replace,
 		};
 	},
 	dispatch => {
diff --git a/projects/plugins/jetpack/_inc/client/writing/custom-css.jsx b/projects/plugins/jetpack/_inc/client/writing/custom-css.jsx
index 29b6d826dfaf6..4a8b545877b94 100644
--- a/projects/plugins/jetpack/_inc/client/writing/custom-css.jsx
+++ b/projects/plugins/jetpack/_inc/client/writing/custom-css.jsx
@@ -1,5 +1,5 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
-import { ExternalLink } from '@wordpress/components';
+import { ExternalLink, Notice } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import Button from 'components/button';
@@ -29,6 +29,30 @@ const trackVisitCustomizer = () => {
 	} );
 };
 
+const CustomizerLink = ( { children, siteAdminUrl } ) => (
+	<a
+		onClick={ trackVisitCustomizer }
+		href={ `${ siteAdminUrl }customize.php?autofocus%5Bsection%5D=custom_css` }
+		title={ __( 'Edit and add CSS directly on your site from the Customizer.', 'jetpack' ) }
+	>
+		{ children }
+	</a>
+);
+
+export const StartFreshDeprecationWarning = ( { siteAdminUrl } ) =>
+	createInterpolateElement(
+		__(
+			"The <i>Start Fresh</i> option in the <a1>CSS customization panel</a1> is enabled, which means the theme's original CSS is not applied. <b>This option will no longer be supported after August 6, 2024.</b> <a2>See how to keep your site intact</a2>.",
+			'jetpack'
+		),
+		{
+			i: <i />,
+			b: <b />,
+			a1: <CustomizerLink siteAdminUrl={ siteAdminUrl } />,
+			a2: <ExternalLink href={ getRedirectUrl( 'jetpack-support-custom-css' ) } />,
+		}
+	);
+
 /**
  * Custom CSS settings component.
  *
@@ -38,7 +62,7 @@ const trackVisitCustomizer = () => {
 function CustomCss( props ) {
 	const {
 		customCssActive,
-		customCssModule: { name, description, module },
+		customCssModule: { name, description, module, options },
 		isBlockThemeActive,
 		isSavingAnyOption,
 		siteAdminUrl,
@@ -92,16 +116,7 @@ function CustomCss( props ) {
 						'jetpack'
 					),
 					{
-						a: (
-							<a
-								onClick={ trackVisitCustomizer }
-								href={ `${ siteAdminUrl }customize.php?autofocus%5Bsection%5D=custom_css` }
-								title={ __(
-									'Edit and add CSS directly on your site from the Customizer.',
-									'jetpack'
-								) }
-							/>
-						),
+						a: <CustomizerLink siteAdminUrl={ siteAdminUrl } />,
 					}
 				) }
 			</div>
@@ -144,6 +159,15 @@ function CustomCss( props ) {
 	return (
 		<SettingsGroup module={ { module } } support={ supportText() }>
 			<FormLegend className="jp-form-label-wide">{ name }</FormLegend>
+			{ options?.replace && (
+				<Notice
+					className="jp-custom-css__deprecation-warning"
+					isDismissible={ false }
+					status="warning"
+				>
+					<StartFreshDeprecationWarning siteAdminUrl={ siteAdminUrl } />{ ' ' }
+				</Notice>
+			) }
 			{ isBlockThemeActive && recommendSiteEditor() }
 			{ ! isBlockThemeActive && customizerLink() }
 			{ toggleModule() }
diff --git a/projects/plugins/jetpack/_inc/client/writing/style.scss b/projects/plugins/jetpack/_inc/client/writing/style.scss
index 91f486990cf3e..afa37f8f3c365 100644
--- a/projects/plugins/jetpack/_inc/client/writing/style.scss
+++ b/projects/plugins/jetpack/_inc/client/writing/style.scss
@@ -51,3 +51,7 @@
 		padding: rem(16px) 0 0;
 	}
 }
+
+.jp-custom-css__deprecation-warning {
+	margin-bottom: 1rem;
+}
diff --git a/projects/plugins/jetpack/changelog/update-custom-css-start-fresh-warning b/projects/plugins/jetpack/changelog/update-custom-css-start-fresh-warning
new file mode 100644
index 0000000000000..5b31fab68772c
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-custom-css-start-fresh-warning
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Custom CSS: add deprecation warning for Start Fresh option
diff --git a/projects/plugins/jetpack/modules/custom-css/custom-css.php b/projects/plugins/jetpack/modules/custom-css/custom-css.php
index 3e259c4d9a942..835fc7b909a59 100644
--- a/projects/plugins/jetpack/modules/custom-css/custom-css.php
+++ b/projects/plugins/jetpack/modules/custom-css/custom-css.php
@@ -3,6 +3,7 @@
 // phpcs:disable Universal.Files.SeparateFunctionsFromOO.Mixed -- TODO: Move classes to appropriately-named class files.
 
 use Automattic\Jetpack\Assets;
+use Automattic\Jetpack\Redirect;
 
 /**
  * Alternate Custom CSS source for 4.7 compat.
@@ -30,6 +31,8 @@ public static function add_hooks() {
 		add_action( 'load-revision.php', array( __CLASS__, 'load_revision_php' ) );
 
 		add_action( 'wp_enqueue_scripts', array( __CLASS__, 'wp_enqueue_scripts' ) );
+		add_action( 'admin_footer', array( __CLASS__, 'update_initial_state' ) );
+		add_action( 'wp_body_open', array( __CLASS__, 'display_frontend_warning' ) );
 
 		// Handle Sass/LESS.
 		add_filter( 'customize_value_custom_css', array( __CLASS__, 'customize_value_custom_css' ), 10, 2 );
@@ -351,10 +354,14 @@ public static function customizer_link( $args = array() ) {
 	 * Handle the enqueueing and localizing for scripts to be used in the Customizer.
 	 */
 	public static function customize_controls_enqueue_scripts() {
+		global $wp_customize;
+
 		wp_enqueue_style( 'jetpack-customizer-css' );
 		wp_enqueue_script( 'jetpack-customizer-css' );
 
+		$setting      = $wp_customize->get_setting( 'jetpack_custom_css[replace]' );
 		$content_help = __( 'Set a different media width for full size images.', 'jetpack' );
+
 		if ( ! empty( $GLOBALS['content_width'] ) ) {
 			$content_help .= sprintf(
 				// translators: the theme name and then the default width.
@@ -371,14 +378,16 @@ public static function customize_controls_enqueue_scripts() {
 				/** This filter is documented in modules/custom-css/custom-css.php */
 				'useRichEditor'        => ! jetpack_is_mobile() && apply_filters( 'safecss_use_ace', true ),
 				'areThereCssRevisions' => self::are_there_css_revisions(),
+				'startFresh'           => isset( $setting ) && $setting->value(),
 				'revisionsUrl'         => self::get_revisions_url(),
 				'cssHelpUrl'           => '//en.support.wordpress.com/custom-design/editing-css/',
 				'l10n'                 => array(
-					'mode'           => __( 'Start Fresh', 'jetpack' ),
-					'mobile'         => __( 'On Mobile', 'jetpack' ),
-					'contentWidth'   => $content_help,
-					'revisions'      => _x( 'See full history', 'Toolbar button to see full CSS revision history', 'jetpack' ),
-					'css_help_title' => _x( 'Help', 'Toolbar button to get help with custom CSS', 'jetpack' ),
+					'mode'                        => __( 'Start Fresh (deprecated)', 'jetpack' ),
+					'mobile'                      => __( 'On Mobile', 'jetpack' ),
+					'contentWidth'                => $content_help,
+					'revisions'                   => _x( 'See full history', 'Toolbar button to see full CSS revision history', 'jetpack' ),
+					'css_help_title'              => _x( 'Help', 'Toolbar button to get help with custom CSS', 'jetpack' ),
+					'startFreshCustomizerWarning' => __( "The Start Fresh option in the Additional CSS panel is enabled, which means the theme's original CSS is not applied. This option will no longer be supported after August 6, 2024.", 'jetpack' ),
 				),
 			)
 		);
@@ -743,7 +752,7 @@ public static function customize_register( $wp_customize ) {
 			'wpcom_custom_css_content_width_control',
 			array(
 				'type'     => 'text',
-				'label'    => __( 'Media Width', 'jetpack' ),
+				'label'    => __( 'Media Width (deprecated)', 'jetpack' ),
 				'section'  => 'custom_css',
 				'settings' => 'jetpack_custom_css[content_width]',
 			)
@@ -786,7 +795,7 @@ public static function customize_register( $wp_customize ) {
 				array(
 					'type'     => 'select',
 					'choices'  => $preprocessor_choices,
-					'label'    => __( 'Preprocessor', 'jetpack' ),
+					'label'    => __( 'Preprocessor (deprecated)', 'jetpack' ),
 					'section'  => 'custom_css',
 					'settings' => 'jetpack_custom_css[preprocessor]',
 				)
@@ -998,6 +1007,157 @@ public static function jetpack_content_width( $content_width ) {
 		return $content_width;
 	}
 
+	/**
+	 * Return whether the Start Fresh option of the CSS editor is enabled.
+	 *
+	 * @return boolean
+	 */
+	public static function is_start_fresh_option_enabled() {
+		if ( wp_is_block_theme() ) {
+			return false;
+		}
+
+		$start_fresh = null;
+
+		// $wp_customize is not available here. Let's get the value of the `replace` option from the last
+		// customize_changeset posts.
+		$posts = get_posts(
+			array(
+				'post_type'   => 'customize_changeset',
+				'post_status' => 'trash',
+				'order_by'    => 'post_modified',
+				'order'       => 'DESC',
+			)
+		);
+
+		// Bail as soon as we find a post that defines the `replace` option.
+		foreach ( $posts as $post ) {
+			$content = $post->post_content;
+
+			if ( empty( $content ) ) {
+				continue;
+			}
+
+			$parsed_content = json_decode( $content, true );
+
+			if ( empty( $parsed_content ) ) {
+				continue;
+			}
+
+			foreach ( $parsed_content as $key => $data ) {
+				if ( str_ends_with( $key, '::jetpack_custom_css[replace]' ) ) {
+					$start_fresh = $data['value'];
+					break;
+				}
+			}
+
+			if ( isset( $start_fresh ) ) {
+				break;
+			}
+		}
+
+		return $start_fresh;
+	}
+
+	/**
+	 * Display a deprecation warning on the frontend for site admins only
+	 */
+	public static function display_frontend_warning() {
+		if ( ! current_user_can( 'edit_themes' ) || ! current_user_can( 'edit_theme_options' ) || ! self::is_start_fresh_option_enabled() ) {
+			return;
+		}
+
+		$notice  = '';
+		$notice .= '<style>';
+		$notice .= '
+.jp-custom-css__deprecation-warning {
+	position: absolute;
+	top: 2.5rem;
+	left: 50%;
+	z-index: 99999;
+	transform: translateX( -50% );
+
+	display: flex;
+	align-items: flex-start;
+	width: 80ch;
+
+	background-color: #fef8ee;
+	border: solid 1px #ccc;
+	border-left: solid 5px #f0b849;
+	box-shadow: 0 0 4px 4px rgba( 0, 0, 0, 0.1 );
+
+	font-size: 1rem;
+}
+
+.jp-custom-css__deprecation-warning p {
+	margin: 0;
+	padding: 1em;
+}
+
+.jp-custom-css__deprecation-warning button {
+	min-width: 48px;
+	min-height: 48px;
+
+	border-color: transparent;
+	background-color: transparent;
+
+	font-size: 1.25rem;
+	font-weight: bold;
+}				
+';
+		$notice .= '</style>';
+		$notice .= '<div class="jp-custom-css__deprecation-warning">';
+		$notice .= '<p>' . wp_kses(
+			sprintf(
+				// translators: 1: URL to the CSS customization panel, 2: URL to the theme stylesheet documentation.
+				__(
+					'The <i>Start Fresh</i> option in the <a href="%1$s">CSS customization panel</a> is enabled, which means the theme\'s original CSS is not applied. <b>This option will no longer be supported after August 6, 2024.</b> <a href="%2$s">See how to keep your site intact.</a>',
+					'jetpack'
+				),
+				esc_url( admin_url( 'customize.php?autofocus%5Bsection%5D=custom_css' ) ),
+				esc_url( Redirect::get_url( 'jetpack-support-custom-css' ) )
+			),
+			array(
+				'i' => array(),
+				'b' => array(),
+				'a' => array(
+					'href'   => array(),
+					'target' => array(),
+				),
+			)
+		) . '</p>';
+		$notice .= '<button aria-label="' . esc_html__( 'Dismiss', 'jetpack' ) . '">&times;</button>';
+		$notice .= '</div>';
+		$notice .= '<script>';
+		$notice .= 'document.querySelector(".jp-custom-css__deprecation-warning button").addEventListener("click", (e) => e.currentTarget.parentNode.remove() );';
+		$notice .= '</script>';
+
+		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		echo $notice;
+	}
+
+	/**
+	 * Update the initial state to include the `replace` option (Start Fresh) in the module data.
+	 */
+	public static function update_initial_state() {
+		if ( 'toplevel_page_jetpack' !== get_current_screen()->base ) {
+			return;
+		}
+
+		$val = self::is_start_fresh_option_enabled() ? 'true' : 'false';
+
+		wp_add_inline_script(
+			'react-plugin',
+			"
+try {
+	var options = window.Initial_State?.getModules?.['custom-css']?.options || {};
+	options.replace = $val;
+} catch (e) {}
+",
+			'after'
+		);
+	}
+
 	/**
 	 * Currently this filter function gets called on
 	 * 'template_redirect' action and
diff --git a/projects/plugins/jetpack/modules/custom-css/custom-css/js/core-customizer-css.core-4.9.js b/projects/plugins/jetpack/modules/custom-css/custom-css/js/core-customizer-css.core-4.9.js
index d45a967b13280..ee1b37e9273cf 100644
--- a/projects/plugins/jetpack/modules/custom-css/custom-css/js/core-customizer-css.core-4.9.js
+++ b/projects/plugins/jetpack/modules/custom-css/custom-css/js/core-customizer-css.core-4.9.js
@@ -57,6 +57,14 @@
 			}).prependTo( '#css-help-links' );
 		}
 
+		// Show deprecation warning if Start Fresh option is enabled
+		if ( !! window._jp_css_settings.startFresh && window._currentSiteType !== 'atomic' ) {
+			customize.notifications.add( new customize.Notification( 'start-fresh-warning', {
+				message: window._jp_css_settings.l10n.startFreshCustomizerWarning,
+				type: 'warning',
+			} ) );
+		}
+
 		customize( 'jetpack_custom_css[preprocessor]', function( preprocessorSetting ) {
 			preprocessorSetting.bind( function( curr ) {
 				var preprocessor_modes = {