<div id="root">
  <div class="solid-color-layer ga-shared"></div>
  <div class="folder ga-shared">
    <div class="folder-rounded">
      <div class="folder-clip">
        <div class="folder-content">
          <div class="folder-paint"></div>
        </div>
      </div>
      <div class="folder-inner-shadow ga-paint"></div>
    </div>
  </div>
  <div class="folder-copy ga-shared">
    <div class="folder-copy-rounded">
      <div class="folder-copy-outer-shadow ga-paint"></div>
      <div class="folder-copy-clip">
        <div class="folder-copy-content">
          <div class="folder-copy-paint"></div>
        </div>
      </div>
      <div class="folder-copy-inner-shadow ga-paint"></div>
    </div>
  </div>
  <div class="folder-copy-copy ga-shared">
    <div class="folder-copy-copy-rounded">
      <div class="folder-copy-copy-outer-shadow ga-paint"></div>
      <div class="folder-copy-copy-clip">
        <div class="folder-copy-copy-content">
          <div class="divider ga-shared"></div>
          <div class="glow ga-shared">
            <div class="on-2 ga-svg">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="ON">
                <pattern id="ga-svg-2" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
                  <svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
                    <text font-family="&quot;Montserrat&quot;" font-size="74" font-weight="700" letter-spacing="0" text-anchor="middle" fill="rgb(57 224 104 / 1)" stroke="rgb(56 224 104 / 0.48)" stroke-width="10" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="125.9">ON</tspan></text>
                  </svg>
                </pattern>
                <rect style="x: 0; width: 200px; y: 0; height: 200px;" fill="url(#ga-svg-2)"/>
              </svg>
            </div>
          </div>
          <div class="on ga-svg">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="ON">
              <pattern id="ga-svg-1" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
                <svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
                  <text font-family="&quot;Montserrat&quot;" font-size="74" font-weight="700" letter-spacing="0" text-anchor="middle" fill="rgb(57 207 100 / 1)" stroke="none" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="125.9">ON</tspan></text>
                </svg>
              </pattern>
              <rect style="x: 0; width: 200px; y: 0; height: 200px;" fill="url(#ga-svg-1)"/>
            </svg>
          </div>
          <div class="off ga-svg">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="OFF">
              <pattern id="ga-svg-0" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
                <svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
                  <text font-family="&quot;Montserrat&quot;" font-size="74" font-weight="700" letter-spacing="0" text-anchor="middle" fill="rgb(174 173 179 / 1)" stroke="none" stroke-width="0" stroke-linejoin="round" paint-order="stroke fill" xml:space="preserve" transform="rotate(0 100 100)"><tspan x="100" y="125.9">OFF</tspan></text>
                </svg>
              </pattern>
              <rect style="x: 0; width: 200px; y: 0; height: 200px;" fill="url(#ga-svg-0)"/>
            </svg>
          </div>
        </div>
      </div>
      <div class="folder-copy-copy-inner-shadow ga-paint"></div>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat%3Aital%2Cwght%400%2C700&display=swap");

#root {
  --width: 400;
  --height: 150;

  width: 500px;
  height: 500px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#root .ga-shared {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

#root .ga-paint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#root .ga-svg {
  position: absolute;
  pointer-events: none;
}

#root .solid-color-layer {
  background: linear-gradient(rgb(250 250 250), rgb(250 250 250)) 0 0 / 100px 100px;
}

#root .folder-rounded {
  position: absolute;
  --ga-shadow-3-0-bounds: calc(clamp(0, sign(min(var(--width), var(--height))), 1));
  --ga-shadow-3-1-bounds: calc((50 + ((var(--width) / 200) * 200)));
  --ga-shadow-3-2-bounds: calc((175 + ((var(--height) / 200) * 200)));
  --ga-shadow-3-3-bounds: calc(var(--ga-shadow-3-1-bounds));
  --ga-shadow-3-4-bounds: calc(var(--ga-shadow-3-2-bounds));
  --ga-shadow-3-5-bounds: calc(var(--ga-shadow-3-1-bounds));
  --ga-shadow-3-6-bounds: calc(var(--ga-shadow-3-2-bounds));
  --ga-shadow-3-7-bounds: calc((((1 + (-1 * var(--ga-shadow-3-0-bounds))) * 52) + (var(--ga-shadow-3-0-bounds) * min(52, min(50, var(--ga-shadow-3-3-bounds), 50, var(--ga-shadow-3-5-bounds))))));
  --ga-shadow-3-8-bounds: calc((((1 + (-1 * var(--ga-shadow-3-0-bounds))) * 200) + (var(--ga-shadow-3-0-bounds) * min(200, min(175, 175, var(--ga-shadow-3-4-bounds), var(--ga-shadow-3-6-bounds))))));
  --ga-shadow-3-9-bounds: calc((((1 + (-1 * var(--ga-shadow-3-0-bounds))) * 244) + (var(--ga-shadow-3-0-bounds) * max(244, max(50, var(--ga-shadow-3-3-bounds), 50, var(--ga-shadow-3-5-bounds))))));
  --ga-shadow-3-10-bounds: calc((((1 + (-1 * var(--ga-shadow-3-0-bounds))) * 324) + (var(--ga-shadow-3-0-bounds) * max(324, max(175, 175, var(--ga-shadow-3-4-bounds), var(--ga-shadow-3-6-bounds))))));
  --ga-shadow-3-11-bounds: calc(max(1, var(--ga-shadow-3-0-bounds)));
  left: calc(var(--ga-shadow-3-7-bounds) * 1px);
  --ga-shadow-3-12-bounds: calc((var(--ga-shadow-3-9-bounds) + (-1 * var(--ga-shadow-3-7-bounds))));
  width: calc(var(--ga-shadow-3-12-bounds) * 1px);
  top: calc(var(--ga-shadow-3-8-bounds) * 1px);
  --ga-shadow-3-13-bounds: calc((var(--ga-shadow-3-10-bounds) + (-1 * var(--ga-shadow-3-8-bounds))));
  height: calc(var(--ga-shadow-3-13-bounds) * 1px);
  opacity: var(--ga-shadow-3-11-bounds);
  border-radius: 183.8px 183.8px 183.8px 183.8px;
}

#root .folder-clip {
  position: absolute;
  inset: 0;
  border-radius: 183.8px 183.8px 183.8px 183.8px;
  overflow: hidden;
}

#root .folder-content {
  position: absolute;
  left: calc(-1 * calc(var(--ga-shadow-3-7-bounds) * 1px));
  top: calc(-1 * calc(var(--ga-shadow-3-8-bounds) * 1px));
  width: 500px;
  height: 500px;
}

#root .folder-paint {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse, rgb(0 0 0) 33.24%, rgb(0 0 0 / 0.752315) 35.92%, rgb(0 0 0 / 0.518519) 43.1%, rgb(0 0 0 / 0.3125) 53.44%, rgb(0 0 0 / 0.148148) 65.64%, rgb(0 0 0 / 0.039352) 78.38%, transparent 90.34%) 52px 200px / 192px 124px no-repeat, linear-gradient(rgb(255 255 255), rgb(255 255 255)) 50px 175px / calc(var(--width) * 1px) calc(var(--height) * 1px) no-repeat;
}

#root .folder-inner-shadow {
  border-radius: 183.8px 183.8px 183.8px 183.8px;
  box-shadow: inset 3.3px 43px 8px 0px rgb(0 0 0 / 0.18), inset -3.5px 7.3px 3px -4px rgb(0 0 0 / 0.1);
}

#root .folder-copy {
  transform: translate(2.842170943040401e-14px, 0);
  transform-origin: 50% 50%;
}

#root .folder-copy-rounded {
  position: absolute;
  --ga-shadow-3-0: calc(clamp(0, sign(min(calc((var(--width) - 30)), calc((var(--height) - 30)))), 1));
  --ga-shadow-3-1: calc((65 + ((calc((var(--width) - 30)) / 200) * 200)));
  --ga-shadow-3-2: calc((190 + ((calc((var(--height) - 30)) / 200) * 200)));
  --ga-shadow-3-3: calc(var(--ga-shadow-3-1));
  --ga-shadow-3-4: calc(var(--ga-shadow-3-2));
  --ga-shadow-3-5: calc(var(--ga-shadow-3-1));
  --ga-shadow-3-6: calc(var(--ga-shadow-3-2));
  --ga-shadow-3-7: calc((((1 + (-1 * var(--ga-shadow-3-0))) * 65) + (var(--ga-shadow-3-0) * min(65, min(65, var(--ga-shadow-3-3), 65, var(--ga-shadow-3-5))))));
  --ga-shadow-3-8: calc((((1 + (-1 * var(--ga-shadow-3-0))) * 190) + (var(--ga-shadow-3-0) * min(190, min(190, 190, var(--ga-shadow-3-4), var(--ga-shadow-3-6))))));
  --ga-shadow-3-9: calc((((1 + (-1 * var(--ga-shadow-3-0))) * 143) + (var(--ga-shadow-3-0) * max(143, max(65, var(--ga-shadow-3-3), 65, var(--ga-shadow-3-5))))));
  --ga-shadow-3-10: calc((((1 + (-1 * var(--ga-shadow-3-0))) * 310) + (var(--ga-shadow-3-0) * max(310, max(190, 190, var(--ga-shadow-3-4), var(--ga-shadow-3-6))))));
  --ga-shadow-3-11: calc(max(1, var(--ga-shadow-3-0)));
  left: calc(var(--ga-shadow-3-7) * 1px);
  --ga-shadow-3-12: calc((var(--ga-shadow-3-9) + (-1 * var(--ga-shadow-3-7))));
  width: calc(var(--ga-shadow-3-12) * 1px);
  top: calc(var(--ga-shadow-3-8) * 1px);
  --ga-shadow-3-13: calc((var(--ga-shadow-3-10) + (-1 * var(--ga-shadow-3-8))));
  height: calc(var(--ga-shadow-3-13) * 1px);
  opacity: var(--ga-shadow-3-11);
  border-radius: 183.8px 183.8px 183.8px 183.8px;
}

#root .folder-copy-outer-shadow {
  border-radius: 183.8px 183.8px 183.8px 183.8px;
  box-shadow: -6.5px 0px 4px -3px rgb(0 0 0 / 0.48);
}

#root .folder-copy-clip {
  position: absolute;
  inset: 0;
  border-radius: 183.8px 183.8px 183.8px 183.8px;
  overflow: hidden;
}

#root .folder-copy-content {
  position: absolute;
  left: calc(-1 * calc(var(--ga-shadow-3-7) * 1px));
  top: calc(-1 * calc(var(--ga-shadow-3-8) * 1px));
  width: 500px;
  height: 500px;
}

#root .folder-copy-paint {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(0 0 0 / 0.35) 0%, transparent 100%) 65px 190px / 78px 120px no-repeat, linear-gradient(rgb(217 220 222), rgb(217 220 222)) 65px 190px / calc((var(--width) - 30) * 1px) calc((var(--height) - 30) * 1px) no-repeat;
}

#root .folder-copy-inner-shadow {
  border-radius: 183.8px 183.8px 183.8px 183.8px;
  box-shadow: inset -300.2px 330.7px 22px -340px rgb(0 0 0 / 0.25), inset -10.9px 10.1px 8px -7px rgb(0 0 0 / 0.25);
}

#root .folder-copy-copy {
  transform: translate(2.842170943040401e-14px, 0);
  transform-origin: 50% 50%;
}

#root .folder-copy-copy-rounded {
  position: absolute;
  left: 79px;
  width: 356px;
  top: 190px;
  height: 120px;
  border-radius: 183.8px 183.8px 183.8px 183.8px;
}

#root .folder-copy-copy-outer-shadow {
  border-radius: 183.8px 183.8px 183.8px 183.8px;
  box-shadow: -2px 0.8px 2px 0px rgb(255 255 255 / 0.97);
}

#root .folder-copy-copy-clip {
  position: absolute;
  inset: 0;
  border-radius: 183.8px 183.8px 183.8px 183.8px;
  overflow: hidden;
}

#root .folder-copy-copy-content {
  position: absolute;
  left: calc(-1 * 79px);
  top: calc(-1 * 190px);
  width: 500px;
  height: 500px;
}

#root .divider {
  background: linear-gradient(rgb(227 227 227), rgb(227 227 227)) 249.5px 200px / 2px 100px no-repeat, linear-gradient(rgb(241 240 245), rgb(241 240 245)) 79px 190px / 356px 120px no-repeat;
}

#root .glow {
  filter: blur(2px);
}

#root .on-2 {
  left: 305px;
  width: max(0px, 100px);
  top: 200px;
  height: max(0px, 100px);
}

#root .on {
  left: 305px;
  width: max(0px, 100px);
  top: 200px;
  height: max(0px, 100px);
}

#root .off {
  left: 106px;
  width: max(0px, 100px);
  top: 200px;
  height: max(0px, 100px);
}

#root .folder-copy-copy-inner-shadow {
  border-radius: 183.8px 183.8px 183.8px 183.8px;
  box-shadow: inset -300.2px 330.7px 22px -340px rgb(0 0 0 / 0.25), inset -10.9px 10.1px 8px -7px rgb(0 0 0 / 0.25);
}

Comments (0)

Customize

Try different values. Your changes stay in this preview and never change the saved project.

Width

Height

3D Toggle Button

Yoav Kadosh

toggle button

Colors

Views

Code size

13.25 KB

Layers

Layers (14)

Folder (copy) (copy)

Folder

Off

text

Glow

Folder

text

Divider

solid

Button

solid

Folder (copy)

Folder

Gradient layer

linear

Solid color layer

solid

Folder

Gradient layer

radial

Solid color layer

solid

Solid color layer

solid

Explore

Community

Social

GRADIENT

.ART

css

Advanced CSS Gradient Editor

Designed & Developed by Yoav Kadosh