DEV Community

Cover image for conic-gradient vs svg,img
Sameer Malik
Sameer Malik

Posted on

conic-gradient vs svg,img

<div class="span">G</div>
and css

<style>
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Red+Hat+Display:wght@800&display=swap");
    .span {
      width: 200px;
      height: 200px;
      background: conic-gradient(
        #eb4132 0% 24%,
        #4086f4 24% 38%,
        #31aa52 38% 63%,
        #fbbd00 63% 86%,
        #eb4132 86% 100%
      );
      padding-left: 57px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 162px;
      font-family: "Red Hat Display", sans-serif;
    }
  </style>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay