CSS Icon: Google Pay

Jatin Sharma

Jatin SharmaAug 12, 2022

3 min read463 words

I will create the Google Pay icon in this article using CSS only. Let's look at how we do that.

Problem

problem

Video Solution

Code Solution

First, we need to create the structure for this logo then we will style that structure.

HTML

index.html

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

CSS

Let's first style the .wrapper and it's making it's all child absolute:

styles.css

.wrapper {
  display: grid;
  place-items: center;
  position: relative;
}
 
.wrapper > *{
  position: absolute;
}

Styling .blue strip:

styles.css

.blue {
  width: 140px;
  height: 80px;
  background: #297aec;
  transform: rotate(-60deg) translate(-35px, -70px);
  border-radius: 50px 25px 25px 0;
}

blue

Now, Styling .green strip:

styles.css

.green {
  width: 170px;
  height: 80px;
  background: #2da94f;
  transform: rotate(-60deg) translate(10px, -30px);
  border-radius: 0 50px 0 25px;
}

green

Now, Styling .yellow strip:

styles.css

.yellow {
  width: 170px;
  height: 80px;
  background: #297aec;
  transform: rotate(-60deg) translate(-20px, 9px);
  border-radius: 0 25px 25px 50px;
  position: relative;
}
 
.yellow::before{
  position: absolute;
  content: "";
  inset:0;
  background: #fdbd00;
  border-radius: 50px 25px 25px 50px;
}

yellow

Final strip is .red:

styles.css

.red {
  width: 140px;
  height: 80px;
  background: #2da94f;
  transform: rotate(-60deg) translate(18%, 49px);
  border-radius: 0 0 50px 25px;
}
 
.red::before{
  position: absolute;
  content: "";
  inset: 0;
  background: #ea4335;
  border-radius: 0 50px 50px 25px;
}

It's now done.

Codepen

You can see the codepen below:

Alternative Solution

The above solution works fine but it has a lot of repetitive code. So try the following one:

HTML

index.html

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

HTML is the same as the previous one.

CSS

styles.css

.wrapper {
  display: grid;
  place-items: center;
}
 
.wrapper > * {
  position: absolute;
  height: 80px;
}
 
.wrapper > *::before {
  position: absolute;
  content: "";
  inset: 0;
}
 
.blue, .red {
  width: 140px;
  background: #297aec;
  transform: rotate(-60deg) translate(-35px, -70px);
  border-radius: 50px 25px 25px 0;
}
 
.red {
  background: #2da94f;
  transform: rotate(-60deg) translate(35px, 49px);
  border-radius: 0 0 50px 25px;
}
 
.red::before {
  background: #ea4335;
  border-radius: 0 50px 50px 25px;
}
 
.green, .yellow {
  width: 170px;
  background: #2da94f;
  transform: scaleX(-1) rotate(60deg) translate(-20px, -30px);
  border-radius: 50px 25px 25px 0;
}
 
.yellow {
  background: #297aec;
  transform: scale(-1) rotate(-240deg) translate(-20px, 9px);
  border-radius: 0 25px 25px 40px;
  position: relative;
}
 
.yellow::before {
  background: #fdbd00;
  border-radius: 50px 25px 25px 50px;
}

Wrapping up

There are many ways to solve this. You can share your approach in the comments. If you like this then you can extend your support by Buying me a Coffee

Jatin's Newsletter

Get notified in your inbox whenever I write a new blog post.

Share on Social Media: