#root {
  width: 320px;
  height: 320px;
  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(213 224 226) 0%, rgb(187 201 208) 38%, rgb(138 147 163) 100%) 0 0 / 320px 320px no-repeat;
}

#root .silver-recessed-rotary-knob-rounded {
  position: absolute;
  left: 82px;
  width: 156px;
  top: 82px;
  height: 156px;
  border-radius: 78px 78px 78px 78px;
}

#root .silver-recessed-rotary-knob-outer-shadow {
  border-radius: 78px 78px 78px 78px;
  box-shadow: 0px 2px 2px 0px rgb(245 248 245 / 0.65), 0px -2px 2px 0px rgb(66 75 89 / 0.25), 0px 5px 9px -3px rgb(58 70 86 / 0.3);
}

#root .silver-recessed-rotary-knob-clip {
  position: absolute;
  inset: 0;
  border-radius: 78px 78px 78px 78px;
  overflow: hidden;
}

#root .silver-recessed-rotary-knob-content {
  position: absolute;
  left: calc(-1 * 82px);
  top: calc(-1 * 82px);
  width: 320px;
  height: 320px;
}

#root .silver-recessed-rotary-knob-paint {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse, transparent 0%, transparent 56%, rgb(246 249 246 / 0.35) 57%, rgb(240 244 240) 58.5%, rgb(142 153 165) 60.5%, rgb(66 75 88) 62%, rgb(79 90 102) 67.5%, rgb(162 174 186) 69%, rgb(214 223 224) 70.5%, rgb(196 208 215) 100%) 82px 82px / 156px 156px no-repeat, repeating-radial-gradient(ellipse, rgb(255 255 255 / 0.025) 0%, rgb(255 255 255 / 0.025) 0.43%, rgb(52 67 84 / 0.04) 0.52%, rgb(52 67 84 / 0.04) 0.95%, rgb(52 67 84 / 0.04) 0.95%) 82px 82px / 156px 156px no-repeat, 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%) 82px 82px / 156px 156px no-repeat;
}

#root .silver-recessed-rotary-knob-inner-shadow {
  border-radius: 78px 78px 78px 78px;
  box-shadow: inset 0px 3px 3px 1px rgb(53 64 76 / 0.5);
}

Comments (0)

Satin Metal - Silver Rotary Knob

Yoav Kadosh

Upper, bright silver rotary knob from the reference. A conic metal finish and delicate concentric tooling sit within a deeply recessed graphite socket.

metal knob aluminum skeuomorphic

Colors

Views

Code size

3.37 KB

Layers

Layers (5)

Silver recessed rotary knob

Folder

Machined rim and graphite socket

radial

Fine concentric machining

radial

Spun aluminum face

conic

Cool satin panel

linear

Explore

Community

Social

GRADIENT

.ART

css

Advanced CSS Gradient Editor

Designed & Developed by Yoav Kadosh