Skip to content

DEV Community

Creating an Apple on a Plate with CSS: A Delicious Journey 🍏

Aleksei Mikhailov on March 21, 2024

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack. Inspiration How about boost of vitamins from super tasty gre...

Read full post

Eckehard • Mar 21

Beautiful!

Adding a very light smoothing so some or all elements can reduce the cartoon-like effect and make it even more realistic. Adding different smoothing to individual elements (like plate2) does also a very nice job.

body {
  background: #fffbc1;
  filter: blur(0.5px);
}

As the apple will drop a shadow, maybe it was better to slightly change plate 1 a bit like this?

.plate1 {
  ...
  background-color: gray;
  box-shadow: inset 3px 50px 80px #b1d9e7;
}

Aleksei Mikhailov • Mar 22

thank you!

filter: blur really helpful

sahra 💫 • Mar 21

This is fantastic 🤩

Kireev Daniil • Mar 21

Incredible

Ben Halpern • Mar 21

Gorgeous

Philip How • Mar 21

Wow, great work @plxel!

Scott Reno • Mar 21

Is that apple rotten?

Đăng Tú • Mar 22

Is this what they call 10x computer artist o.O

Best Codes • Mar 21

Have to admit, this is pretty good! I don't usually eat apples, but now I'm thinking about it…

Great job, I couldn't have done better. 🤩

Jitendra Choudhary • Mar 24

Love it 🔥However why don't you have a red apple?

Abdullah Al Zandani • Mar 21

Love it!

Mironius S • Mar 21

I like the idea how you achieved the apple's shape just with one div combining different radiuses!

Gargee Banerjee • Mar 24

WOW!!😶
Loved the highlight on the apple.