<div id="root">
  <div class="ga-definitions ga-paint">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="position:absolute;inset:0;pointer-events:none" aria-hidden="true">
      <defs>
        <pattern id="ga-svg-0" x="-0.3968253968253968" y="-0.3968253968253968" width="200.79365079365078" height="200.79365079365078" viewBox="-0.3968253968253968 -0.3968253968253968 200.79365079365078 200.79365079365078" preserveAspectRatio="none" patternUnits="userSpaceOnUse" overflow="hidden">
          <g fill="rgb(17 24 39 / 1)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
            <path d="M0 0 L0 200 L200 200 L200 0 Z M132.54 43.254 C139.683 43.254 144.444 47.619 148.413 54.762 L192.063 135.714 C197.619 147.619 188.889 158.73 177.778 158.73 C171.429 158.73 166.667 155.556 163.492 150 L134.921 96.032 L119.048 127.778 C108.776662 147.560144 87.302 159.921 65.873 159.921 C34.127 159.921 6.349 136.508 5.556 101.587 C6.349 67.46 30.952 40.079 65.873 40.079 C80.952 40.079 96.032 45.238 103.175 54.762 C111.111 66.667 105.556 79.365 92.857 80.159 C86.117312 79.949079 86.44322 76.790752 74.603 73.016 C59.524 68.254 46.032 74.999873 39.683 88.491873 C33.333 101.983873 37.616922 117.364654 51.190175 124.603651 C64.578019 132.25535 79.365 126.984 87.302 115.873 L65.873 115.873 C55.556 115.873 50.397 109.524 50.397 100.794 C50.397 92.063 56.349 84.524 65.873 84.524 L103.968 84.524 L117.857 53.968 C121.359334 45.722243 125.039269 43.749483 132.54 43.254 Z"/>
          </g>
        </pattern>
      </defs>
    </svg>
  </div>
  <div class="canvas-background ga-shared"></div>
  <div class="gradientart-original-symbol ga-shared">
    <div class="violet-g-and-ascending-a ga-shared"></div>
    <div class="cyan-g-circular-ribbon ga-shared"></div>
    <div class="g-seamless-rounded-crossbar ga-shared"></div>
    <div class="a-overlapping-cyan-leg ga-shared"></div>
    <div class="precision-silhouette-rounded-g-and-interlocking-a ga-svg">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
        <rect style="x: 0; width: 200px; y: 0; height: 200px;" fill="url(#ga-svg-0)"/>
      </svg>
    </div>
  </div>
</div>

#root {
  --color-1: rgb(192 3 255);
  --color-2: rgb(13 110 255);
  --color-3: rgb(16 227 235);

  width: 500px;
  height: 500px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#root .ga-paint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#root .ga-shared {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

#root .ga-svg {
  position: absolute;
  pointer-events: none;
}

#root .canvas-background {
  background: linear-gradient(rgb(17 24 39), rgb(17 24 39)) 0 0 / 500px 500px no-repeat;
}

#root .violet-g-and-ascending-a {
  background: linear-gradient(29.713950787641522deg, var(--color-2) 19.1%, var(--color-1) 75.48%) 0 0 / 500px 500px no-repeat;
}

#root .cyan-g-circular-ribbon {
  background: linear-gradient(var(--color-3), var(--color-3)) -38px 98px / 305px 103px no-repeat, radial-gradient(ellipse, transparent 49.43%, rgb(0 0 0 / 0.036296) 54.09%, rgb(0 0 0 / 0.127037) 58.87%, rgb(0 0 0 / 0.245) 63.35%, rgb(0 0 0 / 0.362963) 67.09%, rgb(0 0 0 / 0.453704) 69.65%, rgb(0 0 0 / 0.49) 70.6%, transparent 70.7%) -43px 86px / 279px 273px no-repeat, radial-gradient(ellipse, var(--color-3) 70.45%, transparent 70.75%) -43px 86px / 279px 273px no-repeat;
}

#root .g-seamless-rounded-crossbar {
  background: linear-gradient(29.7deg, rgb(129.34451351144168 40.27362729847824 255) 0%, rgb(142.24739010364158 32.9189876409243 255) 100%) 260px 188px / 8px 24px no-repeat, linear-gradient(29.7deg, rgb(58.15033232111503 80.85431057696442 255) 0%, rgb(139.01261680967184 34.76280841848705 255) 100%) 124px 210px / 170px 82px no-repeat;
}

#root .a-overlapping-cyan-leg {
  background: linear-gradient(114.4deg, transparent 34.4%, rgb(0 0 0 / 0.4) 34.4%, rgb(0 0 0 / 0.356481) 36.35%, rgb(0 0 0 / 0.278519) 38.05%, rgb(0 0 0 / 0.185) 39.99%, rgb(0 0 0 / 0.094815) 42.69%, rgb(0 0 0 / 0.026852) 46.62%, transparent 52.3%) 278px 100px / 220px 310px no-repeat, linear-gradient(114.4deg, transparent 34.3%, var(--color-3) 34.5%) 278px 100px / 220px 310px no-repeat;
}

#root .precision-silhouette-rounded-g-and-interlocking-a {
  left: -2px;
  width: max(0px, 504px);
  top: -2px;
  height: max(0px, 504px);
}

Comments (0)

Customize

Try different values. Your changes stay in this preview and never change the saved project.

Color 1

Color 2

Color 3

GradientArt Logo

Yoav Kadosh

A faithful, editable recreation of the original GradientArt symbol: a smooth custom silhouette, rounded interlocking ribbons, and reference-matched cyan, violet and electric-blue gradients, organized into nested folders.

logo gradientart art shapes

Colors

Views

124

Code size

5.09 KB

Layers

Layers (15)

GradientArt / original symbol

Folder

Precision silhouette / rounded G and interlocking A

shape

A / overlapping cyan leg

Folder

Shadow

linear

A / cyan descending ribbon and rounded foot

linear

G / seamless rounded crossbar

Folder

Violet ascender join

linear

Reference-matched crossbar

linear

Cyan G / circular ribbon

Folder

Solid color layer

solid

Cyan ribbon / curved lower handoff (copy)

radial

Cyan ribbon / curved lower handoff

radial

Violet G and ascending A

Folder

Violet to electric blue / matched reference gradient

linear

Canvas background

solid

Explore

Community

Social

GRADIENT

.ART

css

Advanced CSS Gradient Editor

Designed & Developed by Yoav Kadosh