<div id="root">
  <div class="scale-mask-36-px-circular-band ga-shared"></div>
  <div class="temperature-scale-clipped-colored-ticks ga-shared">
    <div class="temperature-scale-clipped-colored-ticks-2 ga-shared">
      <div class="tick-marks-repeating-conic-72-divisions ga-shared"></div>
      <div class="fixed-cold-to-warm-tick-colors ga-shared"></div>
      <div class="inactive-ticks-above-temperature ga-shared"></div>
    </div>
  </div>
  <div class="temperature-hand-centered-pivot ga-shared">
    <div class="red-hand-temperature-angle ga-shared"></div>
  </div>
  <div class="scale-label-40-degrees 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:hidden" role="img" aria-label="40">
      <text font-family="&quot;Montserrat&quot;" font-size="18" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(217 220 217 / 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="106.3">40</tspan></text>
    </svg>
  </div>
  <div class="scale-label-25-degrees 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:hidden" role="img" aria-label="25">
      <text font-family="&quot;Montserrat&quot;" font-size="18" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(217 220 217 / 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="106.3">25</tspan></text>
    </svg>
  </div>
  <div class="scale-label-10-degrees 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:hidden" role="img" aria-label="10">
      <text font-family="&quot;Montserrat&quot;" font-size="18" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(217 220 217 / 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="106.3">10</tspan></text>
    </svg>
  </div>
  <div class="decrease-temperature 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:hidden" role="img" aria-label="−">
      <text font-family="&quot;Roboto&quot;" font-size="64" font-weight="300" letter-spacing="0" text-anchor="middle" fill="rgb(226 229 227 / 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="122.4">−</tspan></text>
    </svg>
  </div>
  <div class="increase-temperature 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:hidden" role="img" aria-label="+">
      <text font-family="&quot;Roboto&quot;" font-size="64" font-weight="300" letter-spacing="0" text-anchor="middle" fill="rgb(226 229 227 / 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="122.4">+</tspan></text>
    </svg>
  </div>
  <div class="temperature-degree-symbol 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:hidden" role="img" aria-label="°">
      <text font-family="&quot;Montserrat&quot;" font-size="30" font-weight="400" letter-spacing="0" text-anchor="middle" fill="rgb(10 12 11 / 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="110.5">°</tspan></text>
    </svg>
  </div>
  <div class="temperature-readout-28-0 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:hidden" role="img" aria-label="26.5">
      <text font-family="&quot;Oswald&quot;" font-size="72" font-weight="500" letter-spacing="0" text-anchor="middle" fill="rgb(10 12 11 / 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.2">26.5</tspan></text>
    </svg>
  </div>
</div>

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

#root {
  --temperature: 26.5;

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

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

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

#root .scale-mask-36-px-circular-band {
  background: radial-gradient(circle, transparent 0%, transparent 60.55%, rgb(255 255 255) 60.65%, rgb(255 255 255) 70.6%, transparent 70.71%, transparent 100%) 48px 58px / 504px 504px no-repeat, linear-gradient(rgb(255 255 255), rgb(255 255 255)) 0 0 / 600px 480px no-repeat;
}

#root .temperature-scale-clipped-colored-ticks {
  mask: radial-gradient(circle, transparent 0%, transparent 60.55%, rgb(255 255 255) 60.65%, rgb(255 255 255) 70.6%, transparent 70.71%, transparent 100%) 48px 58px / 504px 504px no-repeat;
  mask-mode: alpha;
}

#root .tick-marks-repeating-conic-72-divisions {
  background: repeating-conic-gradient(from 239.625deg, transparent 0%, rgb(255 255 255) 0.03%, rgb(255 255 255) 0.21%, transparent 0.24%, transparent 1.39%) 48px 58px / 504px 504px no-repeat;
}

#root .fixed-cold-to-warm-tick-colors {
  mask: repeating-conic-gradient(from 239.625deg, transparent 0%, rgb(255 255 255) 0.03%, rgb(255 255 255) 0.21%, transparent 0.24%, transparent 1.39%) 48px 58px / 504px 504px no-repeat;
  mask-mode: alpha;
  background: conic-gradient(from 237.5deg, rgb(49 132 155) 0%, rgb(91 83 111) 9%, rgb(156 62 81) 20%, rgb(212 51 67) 31%, rgb(239 48 69) 39.03%, rgb(239 48 69) 68.06%, rgb(255 255 255) 68.06%, rgb(255 255 255) 100%) 48px 58px / 504px 504px no-repeat;
}

#root .inactive-ticks-above-temperature {
  mask: repeating-conic-gradient(from 239.625deg, transparent 0%, rgb(255 255 255) 0.03%, rgb(255 255 255) 0.21%, transparent 0.24%, transparent 1.39%) 48px 58px / 504px 504px no-repeat;
  mask-mode: alpha;
  background: conic-gradient(from 237.5deg, transparent 0%, transparent calc((((var(--temperature) * 6) - 27.5) / 3.6) / 1 * 1%), rgb(201 204 203) calc((((var(--temperature) * 6) - 27.5) / 3.6) / 1 * 1%), rgb(201 204 203) 68.06%, transparent 68.06%, transparent 100%) 48px 58px / 504px 504px no-repeat;
}

#root .temperature-hand-centered-pivot {
  transform: translate(0, 70px);
  transform-origin: 50% 50%;
}

#root .red-hand-temperature-angle {
  transform: rotate(calc(((var(--temperature) * 6) - 150) * 1deg));
  transform-origin: 50% 50%;
  background: linear-gradient(rgb(240 45 67), rgb(240 45 67)) 297px -12px / 6px 58px no-repeat;
}

#root .scale-label-40-degrees {
  left: 394px;
  width: max(0px, 200px);
  top: 210px;
  height: max(0px, 200px);
}

#root .scale-label-25-degrees {
  left: 200px;
  width: max(0px, 200px);
  top: 18px;
  height: max(0px, 200px);
}

#root .scale-label-10-degrees {
  left: 6px;
  width: max(0px, 200px);
  top: 210px;
  height: max(0px, 200px);
}

#root .decrease-temperature {
  left: 200px;
  width: max(0px, 200px);
  top: 303px;
  height: max(0px, 200px);
}

#root .increase-temperature {
  left: 200px;
  width: max(0px, 200px);
  top: 115px;
  height: max(0px, 200px);
}

#root .temperature-degree-symbol {
  left: 274px;
  width: max(0px, 200px);
  top: 186px;
  height: max(0px, 200px);
}

#root .temperature-readout-28-0 {
  left: 193px;
  width: max(0px, 200px);
  top: 210px;
  height: max(0px, 200px);
}

Comments (0)

Customize

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

Temperature

Controls the red hand and the colored tick cutoff on the 5-45 degree scale. The displayed number is separate text artwork.

Temperature Control (West Loy)

Yoav Kadosh

Recreated from the temperature-control reference by West Loy: https://dribbble.com/loy. Editable CSS gradients, including repeating conic tick marks, a blue-to-red scale, and a 28.0-degree setpoint.

temperature thermostat conic minimal ui

Colors

Views

Code size

9.08 KB

Layers

Layers (16)

Temperature readout - 28.0

text

Temperature degree symbol

text

Increase temperature

text

Decrease temperature

text

Scale label - 10 degrees

text

Scale label - 25 degrees

text

Scale label - 40 degrees

text

Temperature hand - centered pivot

Folder

Red hand - temperature angle

Folder

Extended red indicator stroke

solid

Temperature scale - clipped colored ticks

Folder

Clipped to base layer

Inactive ticks - above temperature

conic

Clipped to base layer

Fixed cold-to-warm tick colors

conic

Clipped to base layer

Tick marks - repeating conic, 72 divisions

conic

Scale mask - 36 px circular band

radial

White background

solid

Explore

Community

Social

GRADIENT

.ART

css

Advanced CSS Gradient Editor

Designed & Developed by Yoav Kadosh