Coffee mug using CSS

4 min readJan 24, 2022

Tutorial for making a simple coffee mug using only CSS

CSS is widely used in styling webpages. HTML and CSS is basic backbone on frontend development. Although CSS offers a white variety of options, CSS3 has come up with a whole set of new features.

Earlier, websites limited itself to styling basic elements and use images for rest, but with CSS3 new options, developers have a choice to design multiple shapes to make the webpage beautiful without adding to the page speed.

In this tutorial, we will learn how to make a simple coffee mug purely from CSS.

HTML

First, the HTML, is very simple. We just need a single element.

<div class=”coffee”></div>

Coffee mug

For the mug, we start with a simple structure

.coffee{
width:160px;
height:120px;
background: black;
}

For adding the curved bottom, we use border-radius; We need the bottom to be heavily curved.

border-bottom-left-radius: 40%;
border-bottom-right-radius:40%;

Lets add a little curve to the brim

border-top-left-radius: 8px;
border-top-right-radius:8px;

We can write a shorthand as

border-radius: 8px 8px 40% 40%;

Handle

For the handle, we will use the CSS pseudo element, after. This attaches itself after the coffee mug and we can style it as we want. Syntax for the pseudo element is with a simple :after. After and before elements require a mandatory property called content. pseudo elements are inline elements by default that append the content before/after the element.

.coffee:after{

content:””;

display: block;

width:30px;

height:50px;

}

The shape of the handle, we need a semicircle. we curve the top-right and bottom-right of the element and attach the left to the mug.

.coffee:after{

border:20px solid black;

border-radius: 0 50% 50% 0;

}

To position the handle properly, we set the position to “absolute”. by default, absolute elements set themselves relative to the closest relatively positioned element or the body. To set the handle according to the mug itself, we first need to position the mug element.

To position the element, we set the properties top, right, left and bottom. to fix it exactly in place.

.coffee:after{
content:””;
display:block;
width:30px;
height:50px;
border:20px solid black;
position:absolute;
right:-47px;
top:10px;
border-radius: 0 50% 50% 0;
}

Steam

For the steam, we again use the pseudo element, before. Sincle the steam is a but curvy, we can let it take the shape of an ‘S’.

.coffee:before{

content:’ss’;

}

We position it on top and middle of the mug.

.coffee:before{
content:’ss’;
font-size:90px;
letter-spacing:12px;
color:red;
}

to position

top:-100px;
left:50%;
transform:translate(-50%);

To blur out the steam, we add the css property to text-shadow and set the color to transparent

final code

.coffee{
width:160px;
height:120px;
background:black;
position:relative;
margin:8%;
border-radius: 8px 8px 40% 40%;
}