Logo

dev-resources.site

for different kinds of informations.

conic-gradient vs svg,img

Published at
4/9/2023
Categories
css
gradient
frontend
webdev
Author
sameer2malik
Categories
4 categories in total
css
open
gradient
open
frontend
open
webdev
open
Author
12 person written this
sameer2malik
open
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

Featured ones: