diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
index d5abf2b7354695..112f56ac5bd506 100644
--- a/blocks/library/cover-image/index.js
+++ b/blocks/library/cover-image/index.js
@@ -193,5 +193,5 @@ registerBlockType( 'core/cover-image', {
 function dimRatioToClass( ratio ) {
 	return ( ratio === 0 || ratio === 50 )
 		? null
-		: 'has-background-dim-' + Math.round( ratio / 10 );
+		: 'has-background-dim-' + ( 10 * Math.round( ratio / 10 ) );
 }
diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
index 24f5e347f102c9..a9934a93fbc987 100644
--- a/blocks/library/cover-image/style.scss
+++ b/blocks/library/cover-image/style.scss
@@ -33,7 +33,7 @@
 	}
 
 	@for $i from 1 through 10 {
-		&.has-background-dim.has-background-dim-#{ $i }:before {
+		&.has-background-dim.has-background-dim-#{ $i * 10 }:before {
 			background-color: rgba( black, $i * 0.1 );
 		}
 	}
diff --git a/blocks/test/fixtures/core__cover-image.html b/blocks/test/fixtures/core__cover-image.html
index 1a5835852dbb7c..de557f4357676c 100644
--- a/blocks/test/fixtures/core__cover-image.html
+++ b/blocks/test/fixtures/core__cover-image.html
@@ -1,5 +1,5 @@
 <!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<section class="wp-block-cover-image has-background-dim-4 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
     <h2>Guten Berg!</h2>
 </section>
 <!-- /wp:core/cover-image -->
diff --git a/blocks/test/fixtures/core__cover-image.json b/blocks/test/fixtures/core__cover-image.json
index 35f3566c0290be..a8b2f95c682ef6 100644
--- a/blocks/test/fixtures/core__cover-image.json
+++ b/blocks/test/fixtures/core__cover-image.json
@@ -11,6 +11,6 @@
             "hasParallax": false,
             "dimRatio": 40
         },
-        "originalContent": "<section class=\"wp-block-cover-image has-background-dim-4 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>"
+        "originalContent": "<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>"
     }
 ]
diff --git a/blocks/test/fixtures/core__cover-image.parsed.json b/blocks/test/fixtures/core__cover-image.parsed.json
index 70ad0a76af4c0e..9d337ce943ef1b 100644
--- a/blocks/test/fixtures/core__cover-image.parsed.json
+++ b/blocks/test/fixtures/core__cover-image.parsed.json
@@ -5,7 +5,7 @@
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
             "dimRatio": 40
         },
-        "rawContent": "\n<section class=\"wp-block-cover-image has-background-dim-4 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>\n"
+        "rawContent": "\n<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>\n"
     },
     {
         "attrs": {},
diff --git a/blocks/test/fixtures/core__cover-image.serialized.html b/blocks/test/fixtures/core__cover-image.serialized.html
index 1a5835852dbb7c..de557f4357676c 100644
--- a/blocks/test/fixtures/core__cover-image.serialized.html
+++ b/blocks/test/fixtures/core__cover-image.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<section class="wp-block-cover-image has-background-dim-4 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
     <h2>Guten Berg!</h2>
 </section>
 <!-- /wp:core/cover-image -->