Satin Metal - Toggle ON

<div id="root">
  <div class="cool-satin-panel ga-shared"></div>
  <div class="recessed-toggle-housing ga-shared">
    <div class="recessed-toggle-housing-rounded">
      <div class="recessed-toggle-housing-outer-shadow ga-paint"></div>
      <div class="recessed-toggle-housing-clip">
        <div class="recessed-toggle-housing-content">
          <div class="satin-toggle-well ga-shared"></div>
          <div class="on-engraving 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-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="44" font-weight="700" letter-spacing="0" text-anchor="middle" fill="rgb(225 230 233 / 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="115.4">ON</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="recessed-toggle-housing-inner-shadow ga-paint"></div>
    </div>
  </div>
  <div class="silver-toggle-cap ga-shared">
    <div class="silver-toggle-cap-rounded">
      <div class="silver-toggle-cap-outer-shadow ga-paint"></div>
      <div class="silver-toggle-cap-clip">
        <div class="silver-toggle-cap-content">
          <div class="silver-toggle-cap-paint"></div>
        </div>
      </div>
      <div class="silver-toggle-cap-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: 360px;
  height: 240px;
  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 .cool-satin-panel {
  background: linear-gradient(150deg, rgb(213 224 226) 0%, rgb(187 201 208) 38%, rgb(138 147 163) 100%) 0 0 / 360px 240px no-repeat;
}

#root .recessed-toggle-housing-rounded {
  position: absolute;
  left: 112px;
  width: 136px;
  top: 88px;
  height: 64px;
  border-radius: 32px 32px 32px 32px;
}

#root .recessed-toggle-housing-outer-shadow {
  border-radius: 32px 32px 32px 32px;
  box-shadow: 0px 1px 1px 0px rgb(245 248 247 / 0.7);
}

#root .recessed-toggle-housing-clip {
  position: absolute;
  inset: 0;
  border-radius: 32px 32px 32px 32px;
  overflow: hidden;
}

#root .recessed-toggle-housing-content {
  position: absolute;
  left: calc(-1 * 112px);
  top: calc(-1 * 88px);
  width: 360px;
  height: 240px;
}

#root .satin-toggle-well {
  background: linear-gradient(145deg, rgb(121 136 150) 0%, rgb(145 161 175) 55%, rgb(183 198 206) 100%) 112px 88px / 136px 64px no-repeat;
}

#root .on-engraving {
  left: 187px;
  width: max(0px, 57px);
  top: 92px;
  height: max(0px, 57px);
}

#root .recessed-toggle-housing-inner-shadow {
  border-radius: 32px 32px 32px 32px;
  box-shadow: inset 1px 3px 5px 0px rgb(53 66 79 / 0.6), inset -1px -1px 2px 0px rgb(238 243 245 / 0.35);
}

#root .silver-toggle-cap-rounded {
  position: absolute;
  left: 111px;
  width: 66px;
  top: 87px;
  height: 66px;
  border-radius: 66px 66px 66px 66px;
}

#root .silver-toggle-cap-outer-shadow {
  border-radius: 66px 66px 66px 66px;
  box-shadow: 0px 2px 2px 0px rgb(29 37 48 / 0.68), 0px 6px 10px -1px rgb(40 50 65 / 0.35);
}

#root .silver-toggle-cap-clip {
  position: absolute;
  inset: 0;
  border-radius: 66px 66px 66px 66px;
  overflow: hidden;
}

#root .silver-toggle-cap-content {
  position: absolute;
  left: calc(-1 * 111px);
  top: calc(-1 * 87px);
  width: 360px;
  height: 240px;
}

#root .silver-toggle-cap-paint {
  position: absolute;
  inset: 0;
  background: conic-gradient(rgb(166 175 184) 0%, rgb(212 220 225) 8%, rgb(247 250 248) 17%, rgb(154 165 176) 25%, rgb(189 199 205) 33%, rgb(246 248 243) 43%, rgb(146 158 170) 50%, rgb(203 212 217) 58%, rgb(245 248 246) 66%, rgb(146 158 170) 75%, rgb(185 196 205) 83%, rgb(233 238 235) 93%, rgb(166 175 184) 100%) 111px 87px / 66px 66px no-repeat;
}

#root .silver-toggle-cap-inner-shadow {
  border-radius: 66px 66px 66px 66px;
  box-shadow: inset 1px 1px 1px 0px rgb(255 255 255 / 0.95), inset -1px -1px 1px 0px rgb(59 70 86 / 0.55), inset 0px 0px 0px 1px rgb(231 238 241 / 0.45);
}

Satin Metal - Toggle ON

Colors

Views

Code size

Layers

Explore

Community

Social