Learn how to draw an Easter Bunny and an Easter Egg just with CSS. An easy and understandable tutorial with a step by step explanation.
This year Easter is different. The corona pandemic is keeping the world in suspense and we are more or less in quarantine. So there is no family celebration this year and with this newly won time, I wanted to do something meaningful.
A bit bored I decided to make a little Easter greeting from pure CSS.
If you want to follow along, here is the explanation of how I drew the bunny – just with CSS.
1. Let’s start with the Easter Egg
The HTML is fairly easy. We only need 1 divs with the class: egg. With this div we shape the egg, position it and give it a polka-dot background.
Now for the interesting part – the CSS
You can choose the size of your egg yourself, but the height must be greater than the width to get the typical egg shape. There is no formula here, it is best to play around with the size until you like your egg.
I chose a height of 350px and a width of 260px.
To get a real egg shape, of course, we have to round off the corners. We use the border-radius for this.
To get the right shape we round the corners with the border-radius of “50% 50% 50% 50% / 60% 60% 40% 40%“.
(If you want to learn about shaping forms with border-radius and how that works, you find an exceptional explanation here.
Are you wondering that you don’t see anything? Of course, we need a background color to see our code. I chose a nice pink one. But if you prefer a black Gothic egg, you can change the colors as you like.
Now it should look somewhat like that:
Positioning your egg
If your egg sticks in the top left corner, you can position your egg like this:
And here is the whole code for the egg:
Filling the egg with a pattern
I like polka dots. That’s why I have a lot of dotted shirts, skirts, and scarfs. So it made sense to decorate my Easter egg with little dots. If you want a different background, I recommend this website. Here you will find a large selection of CSS codes for backgrounds.
That said, this is how you give your Easter egg the dots:
We have already determined the background color.
Now we use the gradient function for the points.
With the background size we determine the size of the points and with the background position we position the points on the surface.
If you play around with the dimensions of the background elements, you can change the number, size or positioning of the points in the background.
And now you have an Easter egg with a polka dot that should look like this:
The complete code for the Easter egg
2. Positioning the whole drawing
Before we start working on the rabbits, we should take a look at the positioning. We have already positioned the egg in the middle, but we need a kind of container to keep the bunny in the right place at all times.
Without a container, the rabbit would not react responsively and would slip if the screen size changed.
To make our drawing responsive, we put all of our divs in another div (which I call “container“).
For this we work with the CSS property “position“. With the attributes “relative” and “absolute” we can assign a fixed place to the elements and thus get them out of their natural order.
Here you find more information about this kind of positioning.
To position our container in the middle of our page we use the same method as with the egg. We use the position attribute relative to take the container out of its natural flow and position it with the top and left element of 50% and a transform element of translate(-50%, -50%).
I gave the container a width and height of 500px. Also we need a z-index which become important when we work on the head of the bunny, which is placed partly behind the egg.
3. The Bunny
Well, the Easter egg was fun, but let’s get on with something even more creative – the Easter Bunny.
When I plan a CSS drawing, I sketch the desired result on a piece of paper. So I can quickly see which individual elements I need.
In the case of the little bunny, you need
- the paws
- the head
- the eyes
- the colored cheeks
- the nose
- and of course the ears
The HTML for the bunny
After we figured out the different elements we need, we can easily give each of these elements its own div. As you see I created a class bunny which functions as a container for the other divs.
The Bunny Container
First, we need a div container. That is important to be able to position the different bunny elements later.
Our HTML ‘div’ with the class ‘bunny’ includes all other bunny body parts. This is important so that we can assign a ‘position: relative’ to the container again. We already discussed the concept of positioning at the Easter egg above.
Now we position the container with ‘top: 70px’ and ‘left: 115px’.
To find the right place here you may have to play around a bit.
The easiest way is to start with the other bunny parts and then adapt the container box.
Most of the time, this ‘div’ only serves to position the other elements anyway.
We want the bunny to look out from behind the egg. That’s why you only need the front paws that can be seen on the edge of the egg. You only need two oval circles of the same size.
You could create a separate div for each paw – a div for the left arm and a div for the right arm. I work with pseudo-elements here. How you solve that is up to you.
As usual, of course, we need a height and a width again. As with the egg, we need a larger side so that we get an oval shape.
Since we have a “normal” oval shape for the paws, a simple border-radius of 50% is sufficient.
And of course we need a background color again to see our shape at all.
Now we have to position the first paw. Paw 1 should be on the left side of the egg. There is actually no calculation on how to position the elements. It more of a try and error process. In this case we need a top of 120px and a left of -10px.
To finish up we have to turn our paw a little. This happens with CSS transforms. We rotate the element by 15 deg and we’re done with paw # 1.
Using pseudo-elements for the second paw
For the second paw, we create a pseudo-element .bunny_hands::before and copy the elements of paw #1 into it. Now you see … nothing. Well, our pseudo-element needs a content element to be shown. Just insert a content: ‘ ‘;.
Now we need to position again to show the second paw on the top of the egg. Again, just play around with the top, left, and the transform elements until it looks right for you.
And here is the code for the paws:
The head – easy peasy
The head is pretty simple. A simple circle. The only peculiarity is that the head looks out from behind the egg. We use the z-index for this. Simply put, the ‘z-index‘ from the head must be smaller than the z-index of the Easter egg.
Position the head so that a small part is behind the egg. Done!
The eyes of the tiger – ah bunny …
We form the eyes from a small circle, which we mirror with the CSS property ‘box-shadow‘.
So first, let’s build a small circle. Since we have slightly oval eyes we take a ‘height‘ of 20px and a ‘width‘ of 10px. Of course, this requires a black ‘background-color‘ and a ‘border-radius‘ of 50%.
Now it’s about positioning.
Again, no matter how experienced you are, positioning is mostly try and error. I have found that with time you get a better feeling for distances. But in the end you still have to readjust.
First of all, of course, we need our ‘position: absolute‘ property again.
Our left eye looks best in a position of ‘top: 50px‘ and ‘left: 30px‘.
Of course, these values depend on how and where you positioned your div-container.
Now the eye is hanging a little crooked. We change this with the ‘transform: rotate (-45deg)‘ property. It looks better!
Now for the second eye:
With a ‘box-shadow‘ you can virtually copy the eye. The ‘box-shadow‘ property creates a shadow.
We use the following values ’Box-shadow: 35px 0px 0px black‘.
The first value is the ‘offset-x‘, the horizontal positioning. In our case, we want the shadow to appear 35px to the right of our eye. If you want the eyes to be further apart, set this value higher. If the eyes should appear closer together, reduce the value.
The second value determines the ‘offset-y‘. If the right eye should slide further up or down, use this value. I don’t want a cross-eyed rabbit, so the value stays at 0px.
The third value is the ‘blur‘ value. Usually, we want shadows to be blurry, at this value you determine how blurry it should be.
But since we want to have our circle copied, this value is also 0px.
The last thing we have to do is determine the ‘color‘.
And here is the code:
The structure of the light pink cheeks is very similar to that of the eyes.
Again, we use different ‘height‘ and ‘width‘ to get the oval shape. We round off the corners with a ‘border-radius: 50%‘.
We against the cheeks a soft pink color, turn it 45 degrees with the transform property and copy it with the ‘box shadow‘.
Now position and you’re done!
The nose – creating a shape just with the ‘border’ property
The nose is a little more complicated. We want a small triangle, which we construct with the ‘border’ property.
For that we set a ‘width’ and a ‘height’ of 0. Since we don’t have a surface, we don’t need a ‘background-color’ here.
For our triangle we need three border properties:
All these properties get a ‘border-width’ of 10px and a ‘border-style’ of solid. ‘Border-left’ and ‘border-right’ get a border-color of transparent, but ‘border-top’ color is black.
Now we have to turn our nose a little. For this we use ‘transform: rotate ()’ again – just rotate it 125 degrees and it looks better.
This way you get a nice triangle. If you want to see what other shapes you can only create with CSS, have a look at CSS tricks. In this article you will find the codes for numerous CSS shapes.
But that wasn’t it. I decided to make my nose rounder, just looks more cute. For this we use the ‘border radius: 50%’.
And as always: the nose still has to be positioned.
The mouth is a little more complicated. We want a small triangle, which we construct again with the ‘border’ property and the pseudo-element.
So far, the CSS drawing looks like this…
The bunny ears
Now only the rabbit ears are missing. The actual ears are simple. We start with the left ear:
Again we only need an oval shape, so again we use a smaller ‘width’ and an approximately 4 times larger ‘height’. I used a ‘width: 45px’ and a ‘height: 170px’.
Of course we also need a ‘background-color: white’ and a ‘border-radius: 50%’.
Now the positioning comes again.
‘Position: absolute’ and a ‘top: -110px’ and a ‘left: -100px’. This time we need negative values – yes, you can do that too.
With ‘transform: rotate (-80deg)’ we bring the ear into the right position.
One outer ear done…
But we want more! So we add an inner ear in a delicate pink.
For this we use pseudo-elements again. Again we need ‘height’, ‘width’, ‘background-color’ and ‘border-radius.
The whole thing is now positioned again.
Don’t forget the empty ‘content’ property. Without this, the pseudo-elements are not shown.
The left ear code:
The right ear
For the right ear, we copy the code from the left ear. We don’t need to change anything except for the positioning.
Only change the ‘top’ property, the ‘left’ property and the ‘transform’ property and…
You can find the whole code on CodePen
Phew, that was pretty exhausting. But I hope you had a lot of fun – I definitely had a lot of fun!
If that was a little too complicated for you now and you’d rather start with something simpler: In this article, I’ll show you how to build a rainbow-colored headline.
If you have any questions, shoot me a message or dm me on Twitter.