Satin Metal - Vertical Round Slider

<div id="root">
  <div class="cool-satin-panel ga-shared"></div>
  <div class="vertical-recessed-fader-rail ga-shared">
    <div class="vertical-recessed-fader-rail-rounded">
      <div class="vertical-recessed-fader-rail-outer-shadow ga-paint"></div>
      <div class="vertical-recessed-fader-rail-clip">
        <div class="vertical-recessed-fader-rail-content">
          <div class="vertical-recessed-fader-rail-paint"></div>
        </div>
      </div>
      <div class="vertical-recessed-fader-rail-inner-shadow ga-paint"></div>
    </div>
  </div>
  <div class="round-silver-slider-cap ga-shared">
    <div class="round-silver-slider-cap-rounded">
      <div class="round-silver-slider-cap-outer-shadow ga-paint"></div>
      <div class="round-silver-slider-cap-clip">
        <div class="round-silver-slider-cap-content">
          <div class="round-silver-slider-cap-paint"></div>
        </div>
      </div>
      <div class="round-silver-slider-cap-inner-shadow ga-paint"></div>
    </div>
  </div>
</div>

#root {
  width: 240px;
  height: 420px;
  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 .cool-satin-panel {
  background: linear-gradient(150deg, rgb(186 200 208) 0%, rgb(154 166 180) 45%, rgb(116 119 135) 100%) 0 0 / 240px 420px no-repeat;
}

#root .vertical-recessed-fader-rail-rounded {
  position: absolute;
  left: 115px;
  width: 10px;
  top: 60px;
  height: 300px;
  border-radius: 5px 5px 5px 5px;
}

#root .vertical-recessed-fader-rail-outer-shadow {
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 1.5px 1px 1px rgb(237 243 244 / 0.7), 0px -1px 2px 1px rgb(69 81 95 / 0.22);
}

#root .vertical-recessed-fader-rail-clip {
  position: absolute;
  inset: 0;
  border-radius: 5px 5px 5px 5px;
  overflow: hidden;
}

#root .vertical-recessed-fader-rail-content {
  position: absolute;
  left: calc(-1 * 115px);
  top: calc(-1 * 60px);
  width: 240px;
  height: 420px;
}

#root .vertical-recessed-fader-rail-paint {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(65 73 83) 0%, rgb(81 93 102) 35%, rgb(108 120 131) 100%) 115px 60px / 10px 300px no-repeat;
}

#root .vertical-recessed-fader-rail-inner-shadow {
  border-radius: 5px 5px 5px 5px;
  box-shadow: inset 1px 1px 2px 0px rgb(37 44 56 / 0.65);
}

#root .round-silver-slider-cap-rounded {
  position: absolute;
  left: 98px;
  width: 44px;
  top: 269px;
  height: 44px;
  border-radius: 44px 44px 44px 44px;
}

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

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

#root .round-silver-slider-cap-content {
  position: absolute;
  left: calc(-1 * 98px);
  top: calc(-1 * 269px);
  width: 240px;
  height: 420px;
}

#root .round-silver-slider-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%) 98px 269px / 44px 44px no-repeat;
}

#root .round-silver-slider-cap-inner-shadow {
  border-radius: 44px 44px 44px 44px;
  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 - Vertical Round Slider

Colors

Views

Code size

Layers

Explore

Community

Social