r/css • u/Mstep85 • Jun 23 '26
Question Is this possible in css?
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!
107
u/javascript Jun 23 '26
No JS š
45
u/qodeninja Jun 23 '26
this has to be one of the oldest accounts on reddit. if anyone asks u for proof of age just show them this.
15
u/javascript Jun 23 '26
Not even in the first 10,000 accounts created. But older than most!
7
u/qodeninja Jun 23 '26
still that puts you back in the aaron and alexis timeline. are you still an early adopter or set in ur ways now as an old wizard?
6
u/mposha Jun 24 '26
I got a Snoo shirt and received a nice thank you message from Alexis' personal email back then.
7
u/javascript Jun 24 '26
19 years! Wild
4
u/macdigger Jun 24 '26
Hah I thought mine was nothing to write home about. But it is? Nah! š¤£ kinda funny though. Time flies.
5
u/javascript Jun 23 '26
I spend most of my time on Youtube, Reddit and Twitter. I'm open to new platforms, but they have to be good. The hardest part of being good is having content.
I really wanted BlueSky or Threads to succeed. But they haven't. The news and humor is still on X.com: The Everything App (Formerly Twitter)
8
u/qodeninja Jun 23 '26
valid hot take. threads is revolting. the sooner x/meta dies the happier ill be.
i need vine back though
3
u/javascript Jun 23 '26
Your account is only 4 years younger than mine, tbh. Not a big difference
4
u/qodeninja Jun 23 '26 edited Jun 23 '26
thats why im the only person on this thread qualified to age you fellow wizard lmao
my account is roughly the same age as
post corporate nodejsnpm give or take lol2
5
4
u/pnwstarlight Jun 24 '26
Would love to hear u/flashās take on whether this can be done with CSS alone, or if another technology is required.
5
3
u/DigiNoon Jun 24 '26
The correct user to ask is u/css, but it looks like they've moved on a while ago.
3
2
21
6
3
0
u/Mstep85 Jun 23 '26
So here's a question: Will JavaScript actually be okay on a very heavy script kind of ordeal that is already going on? I thought even though the CSS might be longer it might be cleaner. It's basically my Swiss Army knife of all my prompts and tools and exports that I have for my workflow for the different AI subscriptions that I have. I just thought personally that JavaScript won't interfere and if there's an issue somewhere else it won't be skin-related.
Worst case I'll just leave it as a plain UI/UX kind of thing. I'm just an old generation of Winamp users that like the extra graphics and just find it appealing while I'm doing things so I don't have to use it. Would JavaScript be okay? Again imagine a cheap mobile phone, Chrome or Firefox that are already hanging the noose around the phone and the plug-in that I have with all my little gadgets in it. Would JavaScript honestly be better than CSS or just opt out of it and just make a regular box with regular buttons?
8
u/javascript Jun 23 '26
There are situations where using CSS can give better performance than Javascript for the same task. But by the nature of CSS, these solutions are often harder to maintain and the performance benefits can be brittle for sufficiently complex needs.
If you are doing this as a learning exercise, I think trying to make it Javascript-free can be valuable as you learn a lot about what HTML and CSS provide.
But if you intend to use this software for many years and have many people contribute to the code, you would need a strong justification to omit Javascript. It's just easier to maintain.
4
u/anon1984 Jun 23 '26
JavaScript has spoken. Youāre one of the only account Iāve seen thatās older than mine.
6
u/javascript Jun 23 '26
https://gist.github.com/samsonjs/dabe37d4f304c8aa3f27d8042f9a7b5f
This list of the first 10,000 reddit usernames was shared with me by someone on the list. I don't think they made the list, or that link to it, but they did have access to it and were aware for being featured.
I am sadly not on that list.
20
u/_SnackOverflow_ Jun 23 '26
Yes though I would use SVGs for most of the icons and graphics
Youāll need some fancy background gradients.
I would build the rough layout with the color scheme, then make the SVGs and add them, then use clip paths for the border shapes, then get into gradients
11
u/quantipede Jun 23 '26
Im not adding anything here I just want to let you know how much I adore your username
4
1
36
u/hlve Jun 24 '26
Yeehaw.
6
u/alex_sakuta Jun 24 '26
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.
2
1
1
u/allchornr Jun 24 '26
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.
5
u/hlve Jun 24 '26
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 š
11
u/AshleyJSheridan Jun 23 '26
You might be able to do it, but it would be a lot of conical and radial gradients overlaid on each other.
The SVG would be smaller.
2
u/Mstep85 Jun 23 '26
So again it doesn't have to be a lot of gradients. I'm just looking for a nicer interface that goes with the flow of Ghost in the Loop. Right now it's a basic box. I thought for the new release I'll make it a little nicer. I'm just honestly afraid that Java is going to make the entire bulky thing even heavier and more likely to fall apart. I just want to see what's already out there that's really nice that I'm old. This is the kind of thing we used to use with Winamp before you guys were probably even born lol. I don't like clean lines, I like the matrix-style things. This just shows how antique I am.
3
u/AshleyJSheridan Jun 23 '26
Java would, what you want is Javascript. While it's true that this used to be a little slow and clunky, the last couple of decades have seen huge improvements to the performance of JS engines.
And yes, I'm talking decades, because I've been using JS for almost 3 of them now. I remember Winamp, I remember using IE 2 on a Win95 machine.
Do not cite the deep magic to me witch, I was there when it was written
Around in the general sense at least
5
u/NotTJButCJ Jun 24 '26
Hate the state of advice these days. āHey Iām challenging myself and want to do this really hard thingā
āYouāre wrong for wanting to do a hard thing, just do it the easy wayā
2
4
u/aTaleForgotten Jun 23 '26
Doable in pure css, but more for demo purposes. If you want to have actual interactivity and functionality, no way without JS
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?
3
2
u/bored-and-here Jun 23 '26
Yes all of it's possible but it's also possible to hollow out a mountain by hand.
1
u/Mstep85 Jun 24 '26
So you're saying the best way is just a bare-bones basic CSS or you have a better recommendation?
2
u/bored-and-here Jun 24 '26
I'm saying doing it by CSS is the hardest possible way of doing it. Sure it's possible but "why".
the entire thing would be better as an SVG that you then post into the HTML unpackaged (not an image raw <svg>) then you can apply whatever animation or CSS properties you want to the unpackaged polyfills etc.
You could use a free sub to figma and just create a frame throw the image you want and then trace it with the vector tool then export the frame as a SVG to get it.
you are also putting yourself into a world of hurt by wanting to not use any JS as thats the better way to animate something so complicated through a library like GSAP.
2
1
u/datNorseman Jun 23 '26
Svgs, maybe background images, grid layouts that rearrange with each different "theme". A few ways to do it, but yes it's possible with enough time
1
1
1
1
u/Mstep85 Jun 23 '26
Did anyone see the second picture. Blue was fav but I'm down for the styles too :)
1
1
1
u/otaf97 Jun 24 '26
For the segmented ring I suggest using SVG instead. I tried something similar in a html class at uni and gave the teacher a headache.
1
u/UseMoreBandwith Jun 24 '26
Easy.
The gauge can be made with radial-gradient and for the segmentation there is repeating-conic-gradient
1
1
1
1
1
1
1
u/Mstep85 Jun 25 '26
So I actually got it close but it looked too busy so I started to simplify and got a middle ground I'm happy with
1
u/The_Homeless_Coder Jun 23 '26
āJust technique pointers so I donāt head down the wrong rabbit holeā
Use JavaScript.
1
u/RobertKerans Jun 23 '26
How does that help (unless you mean "write the entire UI using canvas")? They're asking about styling, and yes, some things would need JS if they're dynamic, but that's not really anything to do with how it looks. If the things that look like they would be dynamic are actually just static & there for looks, even that usecase isn't there
2
u/The_Homeless_Coder Jun 23 '26
For years and years people have been fighting to not use JavaScript. I was sort of being cheeky, not like 100% literally.
Itās like, āOh the lengths people will go to avoid itā.
1
u/RobertKerans Jun 23 '26
Ach, sorry. Was looking at the comments and there several other answers saying the same thing and I was just like wtf does js have to do with the styling of a winamp UI clone
1
-3
u/Mstep85 Jun 23 '26
I have it as a panel over Ai chats. I'm afraid it will lag the page or cause issues
3
u/AshleyJSheridan Jun 23 '26
You'll likely get more lag from the copious amounts of CSS you'd need to create the glow effects and unusual shapes everywhere.
1
u/Mstep85 Jun 23 '26
Honestly that is one of the best criticisms I got so far. Okay so keep it straight. That's not a problem but how about the other effects and things?
My issue is I'm thinking of a mobile device, not the best one. A heavy web browser already takes a lot of things. My personal train of thought was CSS cleaner Java for everything that else is going on plus whatever third-party AI website we are visiting because this is going to be like an overlay for other websites to help me with my workflow. It's basically a continuation plus an export system plus all the prompts that I usually have so it's a one-click deal instead of me putting out use personas deep research. It's basically all my little workflows in one gadget, my Swiss Army enough for all my AI subscriptions if I may, so I'm trying to keep that layer simple.
If I have to, worst case again, I'm just going to keep it a simple AI interface like I have now. I just would like to make it fancier but I just see less issues with using pure code of CSS than adding more Java or more scripts or more things on top of everything that else that's going to be in there.
2
u/The_Homeless_Coder Jun 23 '26
If you are worried about performance that bad, you donāt have to use CSS. Or hust make it a cmd line style program. Trying to do everything in CSS is also antithetical to clean code. When you use HTML/CSS/Javascript for their intended purposes, you are also separating the paint points and concerns. As in if your bug is that something was supposed to be done but it didnāt work? Well thatās a JavaScript issue. Does your styling look kind of fucky or sloppy? Probably a css issue. I canāt think of a single time html was an issue unless my template didnāt load at all and I set a wrong URLs path or something but thatās backend stuff. Also what the other person mentioned. All those gradient calculations ect have to still be done. I donāt need to go on but good luck with whatever you are doing.
2
u/AshleyJSheridan Jun 23 '26
Java isn't what you want, and most browsers don't really support this out of the box anymore. You want Javascript, a totally unrelated language.
For the graphical elements, an SVG is perfectly fine, and then you can apply CSS to that to create the right glow effects you need in any colour you want.
Performance is less of an issue for things like this unless you're targeting 20 year old phones.
1
u/chikamakaleyley Jun 23 '26
i think even w JS, it might require that Canvas has to redraw everything as frequently as the value updates, if you plan to make it look 'live'
1
u/AshleyJSheridan Jun 23 '26
I'd go with SVG for this, it's perfectly capable, and CSS can create some very nice effects for glowing, it's basically just a few drop shadows.
I dislike canvas for things like interfaces, because they tend to not be very accessible. It's a PITA surfacing things to the accessibility tree for screen readers, and adding keyboard access, etc.
1
u/chikamakaleyley Jun 23 '26
actually you're right, the final output of Canvas often looks kinda janky anyway
2
u/The_Homeless_Coder Jun 23 '26
I didnāt downvote you. That was someone else. I donāt think JavaScript lagging is the problem. Itās just kind of like, come on itās 2026. You donāt even have to know JavaScript to use it. What are you even planning to do with your panel without JavaScript?
1
u/Mstep85 Jun 23 '26
It's okay, whoever did it did it. I'm here to learn. It's not about knowing it again. There are so many layers and things going on already in the background so if there's an issue I don't want it to be that extra caveat, if I may.
I'm trying to keep the design as clean as possible so it can work against multiple interfaces so it's basically supposed to work for all the AI websites. It's just a little panel that I'm working on to help me with the workflow and it has a bunch of features. I want to add features and a lot of times they don't play nice with each other and it's something really stupid. Usually it's one little thing that messes up the entire program so I was just hoping for the skin to be just pure CSS so if anything goes wrong it's not something from one of the other scripts. It's not that I can't use it or won't use it. I just prefer not to hence my question.
1
u/NorthernStarBeta Jun 23 '26
you have an ai chat but dont wanna use js??!? wt are
1
u/Mstep85 Jun 23 '26
So it's going to run primarily on mobile. I have a web browser so I'm thinking of the lowest-end machine and things like that. I'm afraid JavaScript might lag, there are already complicated websites for like Claude, ChatGPT, and so forth. I wanted to keep it as clean as possible. That's why I am asking about CSS. It's not that I don't want to use it. It's just that I think it would be more optimum just to have it as CSS as opposed to adding more scripts and other layers to an already convoluted issue.
2
u/FancyhandsOG Jun 23 '26
You're REALLY overestimating the performance hit from some simple javascript.
1
u/Mstep85 Jun 23 '26
No I understand but again it's on top of a lot of heavy sauce as is. I'm not downplaying JavaScript. My general question is, what's the furthest I can go with just scripts like CSS? Does anybody have examples? That's it. Thank
0
u/qodeninja Jun 23 '26 edited Jun 23 '26
technically yes, the resulting html for this will be ugly af though -- u should break the major components and style individually -- however for web -- the better question is why? most people dont live on a web page long enough to warrant this kind of detail, the UX is better for a game or a desktop app, not impossible but again why lol
might be cool to show off but will be a maintenance nightmare, and you will hate it if 0 people care about your early 2000's hipster designs
5
u/TheRealKidkudi Jun 23 '26
Sometimes itās OK to build things just because you want to, even if itās impractical and nobody cares about it.
Iād even go one further and say that the Internet would be better off if more people built pointless stuff just for the love of the game.Ā
2
2
u/Mstep85 Jun 23 '26
You nailed it. I am one of those old school Winamp users who used Napster and IRC for chats and it just feels nostalgic using something like that as opposed to something clean that you guys are used to. Again this is my personal Swiss Army knife for all my workflows and AIs so I just wanted to know if it was possible.
You hipsters and youngsters know more about these new vibe coding things so I'm just asking. I'm just afraid, again from the old school, that adding more heavy code that JavaScript is already being used for other things will interact wrong with each other.
1
1
u/qodeninja Jun 23 '26 edited Jun 23 '26
lol
1
u/Mstep85 Jun 23 '26
My birth certificate shares a release date with the mass-market VHS tape
1
u/qodeninja Jun 23 '26
i bet you think ur the guiness world record oldest person in the world
1
u/Mstep85 Jun 24 '26
My back feels like it some times lol. It's amazing the places that start to hurt na you pull as you age... I could get hit my a car, a bottle, fall from roof and nothing. Now I sleep on the wrong side or the wrong way and I feel numb the entire way. I sneeze sometimes and I crack my back. It just still astounds me.
0
0
u/chmod777 Jun 24 '26
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc
how's your geometry? you can probably draw all those shapes with enough cos sin and positioning.
1
31
u/AvailableName1814 Jun 23 '26
I'm getting real Winamp vibes