How to recreate this component with (optional: TailwindCSS)
I am trying this but I don't know why I can't make this happen, everything is failing, clip path, background image etc, mission impossible for me, I would love to see how some CSS Wizards would solve this with the fade inside with the dotted pattern bg, fading border and nozzle grain bg ish. Thank you! ❤️
I don't have any URL, otherwise I would inspect it and see how they have done it.
5 Replies
Very quickly thrown together: https://codepen.io/kevinpowell/pen/yLdKdoW
I'd love to see other people's approaches to this, not sure if I took the best one, but I felt like a mask was the easiest way to fade out the background like that, which meant using a pseudo-element.
I'd organize it a bittlei differently to have the full card like in the image, with a top section or whatever for what I did, and then another part for the text on the bottom
I looked at this briefly yesterday but I am the first to admit that clever background fades and gradients are not my forte.
However, following Kevins anwser, I couldn't resist having a go so here is my attempt:
https://codepen.io/cbolson/pen/OJevKje
I wasn't sure how much of what you wanted was regarding the "icon/logo" itself or was more about the background. I'm afraid that I didn't get very far with the logo internal shadows. I used box-shadows but this might be better as a linear-gradient of some sort. I might take another look at this aspect later.
As for the main card background circular fade, I initially used the same mask technique as Kevin for the background fade out but then changed it to use a double radial-gradient, just to be different 😆
@Chris @Kevin thanks for the insight both! ♥️
the only thing missing seems to be the grainy-ness. Looks like felt kinda? Check out https://www.transparenttextures.com/ Use to use these little repeating textures all the time before design trends went overly flat.
I have added some "noise" to mine. To be honest I put that down more to the quality of the image but on re-reading the original post I now realize that Berthje did mention the grain.