How to Create Text with Gradient and Emboss Effect in CSS

I am seeking to create a visual effect for text using CSS that incorporates both a gradient and embossing. I've attached an image to show the effect I'm aiming for.

Example Photo:

Here’s the background style I’m working with:

background: linear-gradient(135deg, #3e296a 0%, #6d37ac 33%, #6d37ac 72%, #10dbac 100%);

And Figma effects:

I’ve done this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Text with Emboss Effect</title>
    <style>
        .gradient-text {
            font-size: 100px;
            font-weight: bold;
            background: linear-gradient(135deg, #3e296a, #6d37ac, #10dbac);
            -webkit-background-clip: text;
            color: transparent;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), 0px 4px 0px rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
<body>
    <div class="gradient-text">Decor</div>
</body>
</html>

Solution

Here is something quite close with background-clip , text-shadow, -webkit-text-stroke and filter, that may inspire you. (An image or SVG could do the job too, btw)

* { box-sizing:border-box; margin:0 }
h1 {
  font-family: 'adlam display';
  font-size: clamp(20px, 25vw, 15em);
  padding: 2rem ;
  text-align: center;
  width: max-content;
  margin: auto;
  background: linear-gradient(90deg, #482b79, #6C36AB, #22bbab);
  background-clip: text;
  color: transparent;
  text-shadow: 0.001em 0.05em .01em #0004;
  -webkit-text-stroke: 0.01em #00000015;
  filter: brightness(120%)
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ADLaM+Display" media="all">
<h1>Decor</h1>