diff --git a/app/assets/javascripts/vue_shared/components/svg_gradient.vue b/app/assets/javascripts/vue_shared/components/svg_gradient.vue
index cca90af275e..5ce45d492f9 100644
--- a/app/assets/javascripts/vue_shared/components/svg_gradient.vue
+++ b/app/assets/javascripts/vue_shared/components/svg_gradient.vue
@@ -4,10 +4,16 @@ export default {
     colors: {
       type: Array,
       required: true,
+      validator(value) {
+        return value.length === 2;
+      },
     },
     opacity: {
       type: Array,
       required: true,
+      validator(value) {
+        return value.length === 2;
+      },
     },
     identifierName: {
       type: String,