Gradient Text From Apple

by Ratanak Serey

HTML

<p class="gradient-text">
This is test Gradient Text
</p>

CSS

.gradient-text {
    --start: #ffbe3c;
    --mid: #ee7743;
    --end: #f44443;
    --position-a: 0,-100;
    --position-b: 50,10;
    --position-c: 150,50;
    --position-d: 200,100;
    --a: 0%;
    --b: 50%;
    --c: 150%;
    --d: 200%;
    background-image: -webkit-gradient(linear, left top, right top, from(var(--mid)), color-stop(var(--start)), color-stop(var(--mid)), to(var(--end)));
    background-image: -webkit-linear-gradient(left, var(--mid) var(--a), var(--start) var(--b), var(--mid) var(--c), var(--end) var(--d));
    background-image: linear-gradient(to right, var(--mid) var(--a), var(--start) var(--b), var(--mid) var(--c), var(--end) var(--d));
    -webkit-background-clip: text;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}