diff --git a/examples/generic.html b/examples/generic.html
index d7688ab..27af338 100644
--- a/examples/generic.html
+++ b/examples/generic.html
@@ -25,27 +25,27 @@
         <hr class="item line">
       </div>
       <div class="ring-1 items-5 offset-270 ccw" >
-        <div class="item s box">A</div>
-        <div class="item s rounded">N</div>
+        <div class="item m  surface ">A</div>
+        <div class="item s  rounded">N</div>
         <div class="item s"> D </div>
         <div class="item s">Y</div>
-        <div class="item s">!</div>
+        <div class="item  s">!</div>
       </div>
       <div class="ring-3 items-3 ccw">
-        <div class="surface item m box lower">
+        <div class=" item m   surface ">
           <div class="content">ONU <br> dos</div>
         </div>
-        <div class="item m">
+        <div class="item m surface">
           <div class="label pos-315">
             <div class="label__text">
               text
             </div>
           </div>
         </div> 
-        <div class="item m upper">
+        <div class="item m upper surface">
           <div class="ring-2 items-4 offset-45 arc-90">
             <div class="item xs ">U</div>
-            <div class="item xs ">L</div>
+            <div class="item xs  ">L</div>
             <div class="item xs stationary" >N</div>
             <div class="item xs">
               <div class="ring-3 items-3"> 
diff --git a/examples/gradient.html b/examples/gradient.html
new file mode 100644
index 0000000..ccd87f1
--- /dev/null
+++ b/examples/gradient.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Update DOM with Settings Form</title>
+    <link rel="stylesheet" href="../dist/css/index.min.css" type="text/css" />
+    <style>
+      body {
+        background-color: orangered;
+      }
+      .circle {
+        border-radius: 50%;
+        width: 200px;
+        aspect-ratio: 1;
+        border: 3px solid rgb(255, 252, 252);
+      }
+      .conic {
+        background-image: conic-gradient(
+        transparent 0px, transparent 40px,
+        green 40px, green 100px,
+        transparent 0
+        );
+        background-size: cover;
+      }
+      .radial {
+        background-image: radial-gradient(
+        transparent 0%, transparent 23%,
+        green 23%, green 41%,
+        yellow 41%, yellow 75%,
+        rgb(50, 31, 188) 75%, rgb(50, 31, 188) 100%
+        );
+        background-size: cover;
+      }
+    </style>
+  </head>
+  <body>
+<div class="circle radial"></div>
+  </body>
+</html>
+
+
