Skip to main content
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

truptis
Community Champion
‎03-06-2025 09:00 AM

How to add Gradient Text in Power BI dashboard

We need to have html code for styling. In this example, we are using the below code:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Gradient Text</title>
    <style>
        body { background: rgb(255, 255, 255); font-size: 36px; }
        demog {
            position: absolute; top: 40%; left: 40%;
            font-size: 40px; font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }
    </style>
</head>
<body>
    <demog> <b> Sample Dashboard </b></demog>
</body>
</html>
 

Note: We can customise the html code as per the styling required.

 

Then, we need to import any custom visual from Power BI desktop for using the html content. Here, have used "HTML Content" visual. After importing the custom visual, we need to create a measure. 

Measure = "

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Gradient Text</title>
    <style>
        body { background: rgb(255, 255, 255); font-size: 36px; }
        demog {
            position: absolute; top: 40%; left: 40%;
            font-size: 40px; font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }
    </style>
</head>
<body>
    <demog>Sample Dashboard</demog>
</body>
</html>

"

The measure should contain entire HTML code in " " (inverted commas)
Save this measure. 

 

Post that we have to select the custom visual (in this case HTML content) and use this measure in the visual.

truptis_1-1741007119888.png

 

Hope you find this article useful. Please hit a thumbs up if it helps. Thanks in advance. 

 

Comments