Skip to content

Instantly share code, notes, and snippets.

@RaneWallin
Last active July 23, 2019 22:35
Show Gist options
  • Save RaneWallin/664de70eb0948cabd17f7242d97fcc46 to your computer and use it in GitHub Desktop.
Save RaneWallin/664de70eb0948cabd17f7242d97fcc46 to your computer and use it in GitHub Desktop.
Freddie Mercury in CSS (Day 1)
head
title Freddie Mercury in CSS
body
div.frame
div.hair
.frame {
border: 2px solid pink;
width: 740px;
height: 740px;
margin: 0 auto;
background-image: linear-gradient(#B5CFE8, #7892AB 10%, #CAE4FD 100%);
}
body {
background-color: black;
}

Freddie Mercury in CSS (Day 1)

A Pen by Rane on CodePen.

License.

I am on a mission to create an image of Freddie Mercury in pure CSS. I want to do this because I love seeing what other people have made in CSS and have always wanted to try it, and I love Freddie Mercuriy. I've played around with simple CSS art in the past, but I've never taken on anything quite like this!

The image I am working from is a black and white image of Freddie in a white tanktop looking into the camera. It's probably his most iconic look.

For my first day working on this, I just focused on creating the background. I simplified the gradient and used a color picker to get the colors as close to the original as possible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment