Open In App

Blaze UI Typography Gradient text

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

Blaze UI comes bundled with a great typography module that covers different text visualizations. There are multiple types of Typography classes in Blaze UI such as Hyperlink, Gradient Text, Highlighted Text, Blockquote, and much more. In this article, we will discuss the Gradient typography class in Blaze UI.

The Gradient text typography makes the color of the text a horizontal gradient of the desired color. To create gradient text typography in the Blaze UI, we use the .u-gradient-text class. The .u-gradient-text class makes the color of the text a gradient which goes from light to dark color from left to right. This class can be used with <div>, <p>, and <span> element.

Blaze UI Typography Gradient text classes used:

  • .u-gradient-text: This class makes the color of text a horizontal gradient.

Syntax:

<div class="u-gradient-text">
    ...
</div>

Example 1: The following example demonstrates the default gradient text typography in Blaze UI.

HTML




<!DOCTYPE html>
<html lang="en">
      
<head>
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
      <h1 style="color:green">GeeksforGeeks</h1>
      <strong>Blaze UI Gradient text typography</strong>
      <br>
      <div class="u-gradient-text">
        Geeksforgeeks is the biggest computer 
        science portal in the whole world.
      </div>
    </center>
</body>
  
</html>


Output:

Blaze UI Typography Gradient text

Example 2: The following example demonstrates the color-modified gradient text typography in Blaze UI.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Gradient text typography</strong>
        <br>
        <div class="u-gradient-text">
            Geeksforgeeks is the biggest computer 
            science portal in the whole world.
        </div>
        <br/>
        <div class="u-gradient-text u-gradient-text--info">
            Geeksforgeeks is the biggest computer 
            science portal in the whole world.
        </div>
        <br/>
        <div class="u-gradient-text u-gradient-text--warning">
            Geeksforgeeks is the biggest computer 
            science portal in the whole world.
        </div>
        <br/>
        <div class="u-gradient-text u-gradient-text--success">
            Geeksforgeeks is the biggest computer 
            science portal in the whole world.
        </div>
        <br/>
        <div class="u-gradient-text u-gradient-text--error">
            Geeksforgeeks is the biggest computer 
            science portal in the whole world.
        </div>
    </center>
</body>
  
</html>


Output:

Blaze UI Typography Gradient text

Reference: https://www.blazeui.com/components/typography/



Last Updated : 19 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads