Gradient text/background

by yiiBoy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gradient-text {
            font-size: 24px; /* размер текста */
            font-weight: bold; /* жирный текст */
            background: linear-gradient(to right, #4caf50, #2196f3); /* градиент от зелёного к синему */
            -webkit-background-clip: text; /* клиппинг фона по тексту для WebKit */
            -webkit-text-fill-color: transparent; /* прозрачный цвет текста для WebKit */
            background-clip: text; /* клиппинг фона по тексту */
            color: transparent; /* прозрачный цвет текста */
        }
        .gradient-background {
            display: inline-block; /* делает элемент блочным, чтобы фон применялся только к тексту */
            padding: 5px 10px; /* отступы вокруг текста */
            background: linear-gradient(to right, #4caf50, #2196f3); /* градиент от зелёного к синему */
            border-radius: 5px; /* закругленные углы для красоты */
            color: white; /* цвет текста */
            font-weight: bold; /* жирный текст */
        }

</style>
</head>
<body>

<p>Это пример <span class="gradient-text">градиентного текста</span> с использованием <span class="gradient-background">HTML и CSS.</span></p>
</body>
</html>