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

sahra 💫 • Mar 21 '24

This is fantastic 🤩

Eckehard • Mar 21 '24

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 '24

thank you!

filter: blur really helpful

Kireev Daniil • Mar 21 '24

Incredible

Ben Halpern • Mar 21 '24

Gorgeous

Philip How • Mar 21 '24

Wow, great work @plxel!

Best Codes • Mar 21 '24

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 '24

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

Đăng Tú • Mar 22 '24

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

Scott Reno • Mar 21 '24

Is that apple rotten?

Gargee Banerjee • Mar 24 '24

WOW!!😶
Loved the highlight on the apple.

Abdullah Al Zandani • Mar 21 '24

Love it!

Mironius S • Mar 21 '24

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