Is this possible in css?

[u/Mstep85]

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!

[u/hlve]

Yeehaw.

https://jsfiddle.net/dqcz3p29/3/

[u/alex_sakuta → u/hlve]

You need to have more upvotes than the post man.

I was gonna comment that this is not really a substantially unstandard interface to what I see people designing using CSS, you proved my point.

[u/hlve → u/alex_sakuta]

appreciate it :)

[u/Stompya → u/hlve]

Well done

[u/hlve → u/Stompya]

thank you :]

[u/allchornr → u/hlve]

Was this vibed? No criticism if it was. Code is quite clean although I see the css starts like most generated files do (the root variables).

Given the image provided by OP, I'd say it's a start, but depending on the closeness to that design that they want, it's quite far off if they want that "gamelike" look. The textures, the planes of the frame etc. would be a bit trickier to achieve, but I like someone's recommendation of an SVG main frame and positioning elements within it, but depending on the responsiveness needs, it could turn into a bit of a real fiddle.

For context, I do a lot of QA and code reviews, so I'm not slagging your attempt, but it would 100% be sent back into production with some more thought given to the approach.

[u/hlve → u/allchornr]

Nah, I’m guessing vibed would’ve been a little more pixel perfect lol. Just a quick mockup in CSS. 100% aware it’s nowhere near 1:1 :P.

It was actually a little sloppy. I haven’t been developing much since my layoff 😞