Creating a circle shape with donut, shadows & text inside

user_12903249 0
Viewed 96

I'm wondering if it's possible to create a shape like this with pure CSS. The reason I don't want to use the image as a background is because I need those segments to be able to expand dyanmically.

I already tried creating the middle donut shape, but I can't figure out how to apply those shadows and the lines dividing the segments...

I would really appreciate some help.

enter image description here

This is my already exisiting donut shape:

.circle {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle__inner {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
}
<div class="circle">
  <div class="circle__inner"></div>
</div>

sass css html
1 Answers

For this solution it is the best way to use a box-shadow both inside and outside. And for the lines conic-gradient. But the text inside you can't create just pure CSS .

body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  height: 100vh;
  background: conic-gradient( hsl(0 0% 97%) 00deg, hsl(0 0% 90%) 50deg 100deg, hsl(0 0% 95%) 100deg 150deg, hsl(0 0% 97%) 150deg 220deg, hsl(0 0% 94%) 220deg 290deg, hsl(0 0% 98%) 00deg);
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 15px hsl(0 0% 0% / 0.2), inset 0 0 25px hsl(0 0% 0% / 0.3), inset 0 0 50px hsl(0 0% 0% / 0.2), 0 0 10px hsl(0 0% 0% / 0.3), 0 0 20px hsl(0 0% 0% / 0.3);
}

.circle__inner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: hsl(0 0% 95%);
  box-shadow: 0 0 15px hsl(0 0% 0% / 0.5), 0 0 30px hsl(0 0% 0% / 0.3);
}
<div class="circle">
  <div class="circle__inner"></div>
</div>

user_155451160
Related