Html Question posted in
Some basic documentation can be found here.

Html – 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:
Text

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

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

And Figma effects:

drop shadow
inner shadow

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>
Tags:

2

Answers


  1. 0

    try this Background-image applies the color and the. -webkit-background-clip clips the background and text together the text is transparent to merge with background color

    font-size: 3rem;
        font-weight: bold;
        background-image: linear-gradient(45deg, red, yellow, green, blue);
        -webkit-background-clip: text;
        color: transparent;
    Login or Signup to reply.
  2. 0

    Can be done using background-clip and text-shadow

    h2 {
    display: inline-block;
    width: 100%;
    font-family: 'Garamond';
    font-size: 160px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 30px;
    text-transform: uppercase;
    background: linear-gradient(119deg, #B37951 7.35%, #F1CEA8 37.25%, #CB9064 72.02%, #875635 94.44%);
    /* background-clip: border-box; */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 10px 10px rgba(0,0,0,0.5);
}
    <h2>Decor</h2>

    You can paste your color codes from figma in the background property of the CSS.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search