diff --git a/coral-component-colorinput/src/styles/index.styl b/coral-component-colorinput/src/styles/index.styl
index c46b67e0dc..944b9b2ba7 100644
--- a/coral-component-colorinput/src/styles/index.styl
+++ b/coral-component-colorinput/src/styles/index.styl
@@ -261,25 +261,18 @@ coral-colorinput-item {
   }
 }
 
-._coral-ColorInput-preview {
+._coral-ColorInput-preview.focus-ring {
   border-radius: $colorinput-button-border-radius;
   box-sizing: border-box;
   background-origin: border-box;
 
   &:before {
-    display: block;
+    content: '';
     position: absolute;
-    left: 0;
-    top: 0;
-    z-index: -1;
-    content: "";
-    width: 100%;
-    height: 100%;
-
-    background-image: svgImport($colorinput-transparency-url);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100%;
+    inset: 0;
+    box-shadow: 0 0 0 var(--spectrum-medium-global-dimension-size-40) var(--spectrum-light-alias-border-color-focus);
+    border-radius: $colorinput-button-border-radius;
+    margin: -var(--spectrum-medium-global-dimension-size-50);
   }
 }