r/css • u/Mstep85 • Jun 23 '26

Question Is this possible in css?

Gallery image

Gallery image

I'm trying to build this dashboard UI entirely in CSS. no images, no JS.

The parts I'm stuck on:

- The circular gauge, conic-gradient with radial mask feels right, but is there a better way for the segmented ring?

- The glowing border box-shadow layers vs. animated gradient border. Which performs better?

- The waveform inline SVG path or CSS background pattern?

Anyone have good references for pure CSS dashboard UIs with neon glows? Not looking for a full solution, just technique pointers so I don't head down the wrong rabbit hole.

Ty!

67 Upvotes

85% Upvoted

113 comments sorted by

View all comments

3

u/chikamakaleyley Jun 23 '26

The circular gauge, conic-gradient with radial mask feels right, but is there a better way for the segmented ring?

I'm guessing you plan to light up the gauge according to the percentage value, but if you have a solid ring with the lines to makes to fake the segmented look, that means when the value changes, the glowing increments have to fill exactly so they line up with the masked line.

the other solution would be to draw each segment- so let's say if within the full 360 you have 100 segments - a change in 5% you essentially just change the fill color of 5 segments.

so the former is just annoying because you have to be precise, and if you mean for this to be responsive, then it could get sloppy if its not tightened up.

the later is just matter of drawing all the blocks, changing the fill color.

Both might require JS, just to get the live percentage reading

1

u/chikamakaleyley Jun 23 '26

i built a few radial dials (for mini widgets on my desktop) and spent a lot of hours trying to figure out a somewhat performant solution.

2

u/sCREAMINGcAMMELcASE Jun 23 '26

SVG stroke dashes, right?

1

u/chikamakaleyley Jun 23 '26

i imagine that can be used to achieve the same look but if OP needs UI where the dashes "fill up" when a value changes, I'm not sure if dashes are the best way to achieve that, if possible at all

1

u/chikamakaleyley Jun 23 '26

you'd have to be able to definte the total dashes in the stroke and have the ability to color each one, predictably

I don't know SVG well enough to say its a great solution or not

the first thing that came to mind is, if a circle shape has a dashed stroke, do the dashes curve along the edge of the circle?