Привет всем! Я прикрепил скриншот из Фигмы.
Привет! Чтобы применить градиент и сплошной цвет к тексту с помощью CSS, можно использовать несколько подходов. Один из наиболее популярных методов включает использование `background` с градиентом и `-webkit-background-clip` для обрезки фона под текст. Вот пример кода, который поможет вам достичь этого эффекта:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Градиентный текст</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0; /* Цвет фона страницы */
}
.gradient-text {
font-size: 4rem; /* Размер текста */
font-weight: bold; /* Жирный шрифт */
background: linear-gradient(45deg, #ff6b6b, #f7b32c); /* Градиент: от красного к желтому */
-webkit-background-clip: text; /* Обрезка фона под текст */
-webkit-text-fill-color: transparent; /* Делает цвет текста прозрачным */
}
.solid-text {
font-size: 4rem; /* Размер текста */
font-weight: bold; /* Жирный шрифт */
color: #333; /* Сплошной цвет текста */
}
</style>
</head>
<body>
<div>
<h1 class="gradient-text">Градиентный текст</h1>
<h1 class="solid-text">Сплошной цвет</h1>
</div>
</body>
</html>
```
### Объяснение:
1. **Градиентный текст**:
- Создается с помощью свойства `background: linear-gradient()`, где вы можете указать цвета и направление градиента.
- Используется `-webkit-background-clip: text`, чтобы заставить фон отображаться только внутри самого текста.
- `-webkit-text-fill-color: transparent` делает текст прозрачным, что позволяет видеть градиент.
2. **Сплошной цвет**:
- Обычное применение цвета текста через свойство `color`.
Вы можете настроить цвета и другие стили в соответствии с вашим дизайном. Если вам нужен другой эффект или дополнительные детали, дайте знать!
Запятую уберите между цветом и градиентом. Цвет всегда только у нижнего фона.
Альтернативы:
1. Сделайте сразу фиолетовый градиент.
2. Либо множественным фоном, вниз градиент из фио в фио, поверх тот ваш.
background: linear-gradient(323deg, rgba(255, 255, 255, 0) 0%, #fff 46.42%, #fff 54.38%, rgba(255, 255, 255, 0) 100%), linear-gradient(#5F4DD3, #5F4DD3);