Creating a Plate with Pure CSS

I found myself staring at the box of white dinnerware in the Williams Sonoma store a bit too long. A store attendant approached and asked if I had any questions.

"No," I said, "I'm actually thinking about the shadows on the plate.

Obviously this was not the typical answer and thanks to my UX Design course, I am not currently the typical customer.

I had been working on Platelette.com for a while, but I was very unhappy with the landing page. Standing in the Williams Sonoma, I realized I hadn't incorporated any plates!!! When I got home I pulled the image of the plate, or a similar one, from the online image of the dinnerware I had been staring at in the store. I pulled it into Figma and created a few concentric circles, then a whole lot of shadows.

The box-shadow CSS property was not new to me, but this was definitely one of the most extensive uses I had found for it. By combining both outset and inset shadows, but light and dark, I was able to come pretty close to the original image. The light shadows helped especially to soften the edges of some of the transition points to give it a more smooth look.

After brainstorming in Figma, I pulled up my project in Next.JS and started creating a component that would use tailwind and vanilla css to create these plates based on a provided size parameter. The result can be seen at Platelette.com. I was pleased with the output, and by combining some animations from Framer Motion I was much happier with the landing page and connection to the project's title.