Create Beautiful Images in CSS to Buff Up Your Portfolio

Many people build weather apps to show off their new skills. Don’t let yours be boring

Published in

Better Programming

4 min readDec 8, 2020

image of a storm cloud emitting a flashing bolt of lightning — Image credit: Author

Nowadays, it’s hard to get your first job without impressing somebody with your portfolio. Everybody is creating weather apps, but does everybody have custom CSS-based images in theirs? Let’s create unique images to boost your portfolio.

There are multiple shapes that we can create in CSS, so why not create custom CSS images instead of stock photos? These will cut some unnecessary requests and speed up your website; moreover, they allow you to bring some life to your site.

I don’t want to create the entire app here, only images that you can use to build one. It may look like you put in a lot of effort to tweak the app, but you didn’t.

Exercise 1. First-Ever CSS Cloud

Let’s start with a simple cloud. This cloud is made with one rectangle and two circles. You can use three divs, but I prefer to minimalize HTML as much as I can. That’s why I use one div for the rectangle and two pseudo-elements to create the circles.

This is really easy.

cloud image broken into its constituent parts of two circles and an oblong — Cloud broken into parts

Now we need to change the background of our circles and move them closer to the rectangle.

image of a basic white fluffy cloud on a blue background — Our first basic cloud

Voilà! The first cloud created!

Exercise 2. Magical Cloud

This cloud is unusual. It’s created with one rectangle and three squares: one div, two pseudo-elements, and one span.

rectangular cloud image broken into its constituent parts: three diamond shapes and a long rectangle — Rectangle cloud

We have the same situation as in the first cloud. We need to slide the elements together and change the background to white.

image of a fluffy white cloud with pointed edges against a mauve background — Full square/rectangle cloud

Exercise 3. Weather Images

Let’s get our hands dirty. We will create two images: a basic sunny cloud and a stormy, evil one. But don’t worry, it’s simple.

All images are based on this article.

First we need to create a few components.

Our base colour component is created similar to the way we did the first one.

image of a fluffy white cloud on a pale blue background — Base cloud

Cloud shadow

To create shadow, we need to duplicate our cloud with additional blur, colour it blue, and scale it down.

image of a fluffy white cloud on a pale blue background with a darker blue shadow in front of it — Base cloud with shadow

Step by step:

Duplicate the cloud with a blue colour.
Add blur.
Scale it down — transform: scale(0.8).
Add pseudo-elements — two white circles to mask our shadow.

Sun image

This is pretty simple: a circle with a shadow and a pseudo-element background to lighten our sun.

Cloud and sun

Now we have to combine the sun, the cloud, and some additional sun flashes.

image of the sun partially covered by a fluffy white cloud with a shadow in front of it — Full image of cloud with the sun

And that’s it!

You can play with the sunny cloud on CodePen.

As you can see, creating this image took us only a few minutes of work. Moreover, creating another image based on this one can be even faster. So let’s do this!