Как создать текст с эффектом градиента и тиснения в 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>@Шон Спасибо за ответ! Я знаю, как создавать тени в CSS. Но я не могу сделать тень с цветовым градиентом. Я пытался использовать text-shadow и box-shadow, но это не сработало. Я хочу сделать текст с цветовым градиентом и эффектом тиснения. Текст должен выглядеть 3D.
Пожалуйста, отредактируйте свой вопрос, чтобы показать, что вы пробовали. Минимально воспроизводимый пример с использованием фрагмента стека — отличный способ продемонстрировать предварительные усилия.
Ответы 3
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? Обычно ожидаются дополнительные исследования, прежде чем задавать вопрос о переполнении стека.