CSS Battle Two-Toned Circle
Tags: css, tutorial, learning
Published: 2023-08-11 14:27:15

Here's a recent [CSS Battle](https://cssbattle.dev/) daily target. It's only live for 24 hours. After that you can't get a score on it, unless you have the PLUS Plan. 

There's no leader board on Daily Targets. So I feel I can share an old daily target here.

Here's the starting set up. Goal is to build the target image on the right. They give you the colors and some boiler plate code.


![two windows on an app. One has an orange square on a white background. The other has a two toned circle on a brown background.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lf34p7mn9k7v6iadv5i.jpg)

Read more about how it works in this post.

{% embed https://dev.to/jarvisscript/css-battle-test-your-skills-1ia6 %}


## Background and base color. 
I copied the background color for the body, then used flex to center a circle. A circle is a square with a border radius. 

```HTML
<cir></cir>
```

```CSS
  body{
    background: #926927;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  cir {
    width: 200;
    height: 200;
    background: #F8B140;
    border-radius: 50%;
  }
```

![Two windows on an app. One has an light yellow circle on a brown background. The other has a two toned yellow and white circle on a brown background.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/186kvm8xlsvsli4x2ssh.jpg)

## Now in full color.

That gives a circle but it only has one color. How to add the second color? 

Maybe layer another circle on top and make half of each transparent?

There's way to do it with just one circle element. Gradients!

```css
  cir {
    background: linear-gradient(#F8B140, #FFEBCB);
  }
```
![Two windows on an app. One has an yellow and white circle  on a brown background. The yellow and white are mixed together The other window has a two toned circle on a brown background.But the colors have sharp divide between them.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74yworsqar8fsk5tg1yy.jpg)


Adding a second color to the background, gives a blend of the colors, not a sharp divide between them like the target image. Also the colors move from top to bottom. We need these to transition horizontally.

## To The Right

Adding `to right` before the colors changes the direction of the blend from left to right instead of the default top to bottom.


```css
  cir {
    background: linear-gradient(to right ,#F8B140, #FFEBCB);
  }
```

![Two windows on an app. One has an yellow and white circle  on a brown background. The yellow and white are mixed together The other window has a two toned circle on a brown background. But the colors have sharp divide between them.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa35gf37k2co5cjcc9gw.jpg)

## Hard Stop

The color gradient is moving in the right direction but it's still blended. The target image has a distinct line where the colors meet. 
This need a hard stop. I use percentages to have the yellow end 50% of the way across and the white to start there. 

```css
  cir {
    background: linear-gradient(to right ,#F8B140 50%, #FFEBCB 50%);
  }
```

![Two windows on an app. Both windows have a two toned circle on a brown background. The colors have sharp divide between them.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5zsys51t1rq6fu7ndon.jpg)

## Summary

This was another fun challenge. There are different ways to solve these. I was happy to do it with just one tag.