How to draw your face using CSS

Step 1: Understanding the Guidelines

Drawing in CSS comes with a large number of limitations, and if we wish to use CSS, we have to know these limitations.

For this challenge, I restricted myself to utilizing solely div HTML objects, enhancing solely the next CSS variables:

  • width
  • top
  • left
  • prime
  • border-radius

To provide the picture a bit extra aptitude, I utilized the next properties of remodel:

  • rotate()
  • skewX()

I restricted the quantity I used the remodel variable as we are going to see later that changing this from Illustrator to CSS is a bit much less straight ahead.

Step 2: Time to Draw!

I used an illustration of my face I made for a earlier challenge as my reference. I needed the problem of creating one thing that wasn’t completely symmetrical and dealing with straight in direction of the digital camera. Additionally, I like how darn completely happy it seems to be.

To your personal, you should utilize any drawing or photograph of your self. Simply guarantee it accentuates your key options that may be simply drawn in a minimal model.

My development from unique to CSS optimized

I rotated my picture 20° in order that many of the strains had been 90° or parallel with the y-axis.

Then, retaining within the thoughts the CSS guidelines, use the Rectangle device to attract rectangles over the picture. This step is the place your creativity shines probably the most. Mess around together with your rectangle shapes, nook radius, skewing, and rotation to create a glance you want. Additionally, colour is your finest buddy, so go forward and have enjoyable.

Professional tip for this half, be mathematical together with your skewing. You may get your rotation, width, top, and place values within the Remodel and Form Panel as we are going to later, however Skewing worth is just not recorded, so proceed with warning.z

Step three: Establishing the HTML

In HTML, create a div named faceContainer. All your shapes will likely be confined on this field. Set the width and top of this div to that of your artboard, and your canvas is now able to go!


From right here, categorize every form in your Illustrator drawing primarily based on colour and layer. This fashion, we will put all these shapes in identical div to cut back redundancy in defining background-color and z-index

<div class="faceContainer">
      <div class="hair head">
        <div class="tophair left"></div>
        <div class="tophair center"></div>
        <div class="tophair proper"></div>
        <div class="bread-jaw"></div>
        <div class="bread-chin"></div>

Now, let’s return to Illustrator and get issues prepared for CSS

Step four: Establishing for translation from Illustrator to CSS

Going into this a part of the method, I used to be nervous that it might be too advanced to translate to CSS. I didn’t use precise numbers for the width, top, and rounded corners, and I used to be a bit formidable with my skewing. Fortunately, after getting began, I spotted that this step was simply a variety of repetitive work.

Our greatest buddy for this step: the Remodel Panel

The gloriously easy Remodel Panel

With the Reference Level set to the higher left nook, the X & Y values can simply be reproduced in CSS with the left & prime variables. And naturally, W & H will be reproduced with width & top.

Notice: Make certain to both transfer your Artboard in Illustrator to X: zero and Y: zero. It will be certain that the X & Y values are appropriate.

Artboard X & Y

Step 5: Brute Power CSS

As I discussed prior, I needed to create this picture as fast as I may. This is probably not probably the most elegant answer, but it surely undoubtedly works.


As I stored my drawing minimalistic and the colour palette easy, I used the guardian div that I positioned my shapes in so as to change the colour. As all the hair in my drawing is of the identical colour, it was so simple as this:

.hair div 
  background-color: #3A3A3A;
  place: absolute;

Place, Width, and Peak

With the general faceContainer being place: absolute, we will transfer little one div’s to any X-Y coordinate relative to faceContainer by utilizing the left and prime variables.

Happening your checklist of HTML divs, choose the form in Illustrator and open the Remodel Panel.

Sideburn Chosen with Remodel Panel Open

With this, merely kind within the values. X for left, Y for prime, W for width, H for top.

Tip: For my workflow, I break up my display screen between my textual content editor and Preview the place I pasted a screenshot of the Remodel panel. Positioning and scaling was undoubtedly probably the most repetitive a part of this challenge, so limiting the quantity of switching screens made the method way more environment friendly.

My textual content editor set up

Rounded Corners

For your whole rounded corners, the method is nearly similar, besides this time, use the Form Panel. This holds all of your precise values in your border-radius.

Form Panel for my mustache

Remodel (Skewing and Rotating)

For skewing and rotating, be certain that you place the form in CSS utilizing the item previous to skewing or rotating. CSS’s remodel will rotate from the middle of the form by default, so ensure that to account for this.