diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid
index e6b5647..8dd815e 100644
--- a/snippets/shx-3d-render-input.liquid
+++ b/snippets/shx-3d-render-input.liquid
@@ -91,6 +91,28 @@
         overflow: hidden;
     }
 
+    .shx-mat-matte {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+        background-size: 20px 20px;
+        opacity: 0.5;
+    }
+
+    .shx-mat-silk {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+        background-size: 20px 20px;
+        opacity: 0.5;
+    }
+
 </style>
 
 <script type="text/javascript"> 
@@ -259,11 +281,11 @@
             `;
 
             if(options[color].matte) {
-                html += `<span style="color: white; font-size: 0.8rem; position: absolute; bottom: 0; right: 0;">Matt</span>`;
+                html += `<span class="shx-mat-matte"></span>`;
             }
 
             if(options[color].silk) {
-                html += `<span style="color: white; font-size: 0.8rem; position: absolute; bottom: 0; right: 0;">Seide</span>`;
+                html += `<span class="shx-mat-silk"></span>`;
             }
 
             html += `</label>`;