No. Clients decide what they want not me.

@@outpost31737 That's true for clients' websites, but you can choose what to do on your personal website. I haven't used flat design on my personal sites in decades.

@@outpost31737 You have to advise your clients on what would give them better results, if a more attractive UI will give them better traffic, or please their target audience more, it's the designer+deverloper's responsibility to educate the client.

@@outpost31737 Clients are stupid. You need to tell them what they want. It's your profession.

Would like to see how to do CSS styles that look like Microsoft demo apps which the apps actually don't look like. This video is a step in that direction.

That will cause a huge performance load.....because that blur is too large

@@muzammilsiddiqui8771 not really no, as long as the photo or the vector used is optimized performance won't be an issue

​@@muzammilsiddiqui8771yeah... use 10mb image for background for better performance

Welp i searched aurora background by code, end up here

it really does put performance penalty...

Yes, I would like to know how to convert this to CSS.

By using CSS. For example, radial gradients.

You can use the 'filter' css property for blur, contrast, etc...

whatever your HTML ID OR CLASS here { background-image: radial-gradient(circle at 48.4% 47.24%, #212121, transparent 76%), radial-gradient(circle at 77.78% 47.64%, #787878, transparent 40%), radial-gradient(circle at 94.79% 5.77%, #1c1c1c, transparent 54%), radial-gradient(circle at 29.24% 47.77%, #969696, transparent 41%), radial-gradient(circle at 95.28% 91.6%, #1c1c1c, transparent 77%), radial-gradient(circle at 9.1% 85.96%, #292929, transparent 100%), radial-gradient(circle at 6.67% 6.82%, #292929, transparent 100%), radial-gradient(circle at 50% 50%, #ffffff, #ffffff 100%); } This is just black and white stuff I did on my site atm

ye i was thinking this is just linear gradients but these kinda look better especially the noise texture

🎉 how to do it in css/ tailwind

What's the challenge? Those are CSS basics that can be coded in literally minutes.

use a few radial gradients with start, stop, and ends. Mess around with it :)

@@czerskip you say its basic but dont explain how to achieve the problem

i think using a color burn might even allow me to achieve that more liquid blur effect

No, that is not necessary. You can simply use the exact image and stretch it to the height. Remember that these are just some color gradients. Nothing to worry about here. :)

snipping tool in window

@@iampankajmaurya I use that but I did not seem him use it unless he used a shortcut

@@JimKernix it's the same tool buddy he is just using the shortcut key. Timestamp 5:12

@@iampankajmaurya Ok, thanks - he moves fast so I guess I missed it

@@JimKernix you can also setup PrintScreen Key as a shortcut to snipping tool

You can always convert the gradient as image , I don’t see an issue here for the development

Sure, but you didn’t show it in the video

Why? Forget the size. The problem is they're completely uneditable, disconnected from any design system or color variables, give zero control in implementation, are unresponsive, the list goes on and on…

Buddy, I literally showed the SVG way of doing things in the first 3rd of the video. You can't do the stuff I did in the Photoshop portion exclusively with SVG alone.

And all of the concerns in your second comment are addressable by intelligently using colors that are consistent with the design system, and through CSS media queries.

Not everything must be handled with CSS. While maintaining the lowest file sizes and speed as possible is commendable, it is not the end all, be all. Creativity and being unique with assets should afford us some freedom and leeway if the project fits.

@@czerskipyou’re not making sense.