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.
Hope you find this article useful. Please hit a thumbs up if it helps. Thanks in advance.
Published 1 year ago
Version 1.0
truptis
Community Champion
Community Champion