CSS Battle #39 – Sunset

[danieltott]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[danieltott]

Here's my best attempt (so far! 😁) - 673.33 (178 chars) using radial-gradient, linear-gradient, and clip-path

Minimized code

<style>*{background:radial-gradient(circle,#998235 25vw,#1A4341 0)}*>*{margin:80 0;background:linear-gradient(#0000 50%,#F3AC3C 0)0 0/1q 5ch#1A4341;clip-path:circle(125px at 50vw

Readable code

<style>
* {
  background: radial-gradient(circle, #998235 25vw, #1a4341 0);
}
* > * {
  margin: 80 0;
  background: linear-gradient(#0000 50%, #f3ac3c 0) 0 0/1Q 5ch #1A4341;
  clip-path: circle(125px at 50vw);
}
</style>

[Narigo]

One of my solutions with elements that are mirrored. Similar to Dans

Similar to Dan

<a><a>
<style>
  *{background:#1A4341}
  a {
    background:
      linear-gradient(#0000 55px,#1A4341 0 75px,#F3AC3C 0 95px,#1A4341 0 115px,#F3AC3C 0 125px,#0000 0),
      radial-gradient(#998235 100px, #1A4341 0);
    border-radius: 50%;
    inset: 25px 75px;
    clip-path: inset(0 0 50%);
    position: fixed;
  }
  a+a {
    scale: -1;
  }
</style>