Как создать текст с эффектом градиента и тиснения в CSS

Я хочу создать визуальный эффект для текста с помощью CSS, который включает в себя как градиент, так и тиснение. Я прикрепил изображение, чтобы показать эффект, к которому я стремлюсь.

Пример фото:

Вот стиль фона, с которым я работаю:

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

И эффекты Фигмы:

Я сделал это:

<!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>

🤔 А знаете ли вы, что...
HTML может вставлять изображения, аудио и видео на веб-страницы с помощью соответствующих тегов.

[РЕШЕНО]Перейти к решению

1

52

3

Html113619 вопросов Css75481 вопрос Sass3570 вопросов

Background-image применяет цвет, а -webkit-background-clip объединяет фон и текст, текст становится прозрачным и сливается с цветом фона.

.gradient-text {
  font-size: 3rem;
  font-weight: bold;
  background-image: linear-gradient(45deg, red, yellow, green, blue);
  -webkit-background-clip: text;
  color: transparent;
}

<div class = "gradient-text">Decor</div>

Это можно сделать с помощью background-clip и 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>

Вы можете вставить свои цветовые коды из Figma в свойство background CSS.

Решено

Вот что-то очень близкое к background-clip, text-shadow, -webkit-text-stroke и filter, что может вас вдохновить. (Кстати, изображение или SVG тоже могут подойти)

* { 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>

Как создать текст с эффектом градиента и тиснения в CSS

Ответы:

Интересные вопросы для изучения