CSS Iceberg

Source: Dev.to

Overview

CodePen runs weekly coding challenges, and this week’s theme is Winter, focusing on Ice and Snow. I decided to participate by drawing an iceberg floating in the ocean.

I found an iceberg image online that I liked and thought it would be fun to recreate it in CSS. After experimenting with multiple elements, I settled on a single‑element solution that uses only CSS—no additional HTML elements.

Whenever I share a zero‑element drawing on CodePen, I add a small disclaimer: while the HTML panel may look empty, there is still some HTML. Specifically, I rely on the “ element, along with its ::before and ::after pseudo‑elements, to create the artwork.

There are also ways to achieve a true zero‑HTML setup by applying the styles directly to :root and forcing the browser to render the CSS (this only works with Apache and Firefox). So technically, this drawing could be achieved with pure CSS and absolutely no HTML elements.

Implementation Details

• body – renders the sky using a linear gradient and adds two conic-gradient shadows.
• body::before – draws the iceberg, shaped with a clip-path and shaded with conic gradients.
• body::after – creates the water and waves using a repeating horizontal radial gradient plus a linear gradient for depth.

Demo

You can view the live demo and explore the source code on CodePen: