Hello! We will play around with svg images and text in this one. Adding some cool shades in image and text using css property.

To begin with let's start with svg(scalable vector graphics) images.

svg are scalable vector graphics images that means, can make it big or small without loosing it quality. and it is widely used for creating icon, logo, etc.

color of this svg image can be change using css. Amazing right, image color? Will look how it happen very easily using css.

Two methods to change colour of svg image :

1. Using svg sprites
2. Using svg image

1. using svg sprites

below is html

<div class="battery">
        <svg>
            <use xlink:href="image/symbol-defs.svg#icon-battery">
        </svg>
</div>

output

icon used from icomoon

<div class="battery">
        <svg style="fill: #3498db">
            <use xlink:href="image/symbol-defs.svg#icon-battery">
        </svg>
</div>

output

as in the above example, color of the entire svg is possible to change. but what if want to add some shades of colors in this image. and it is possible using second method.

2. using svg image

below is html and css

<style>
        .battery{

                width: 60%;
                height: 160px;
                -webkit-mask-image: url(image/SVG/battery.svg);
                -webkit-mask-size: cover;
                background-image: linear-gradient(to right, black 50%, rgb(167, 167, 167) 50%);
        }
    </style>
    <div class="battery">

    </div>

output

first part ends here

Let's move to the second part to add some shades to text background

Below is html and css for no text background shades

<style>
        .heading {
            text-transform: uppercase;
            font-weight: 300;
            margin: 50px;
        }
</style>
<div>
     <h1 class="heading">Html and Css</h1>
</div>

output

html and css with text background shades

<style>
        .heading {
            text-transform: uppercase;
            font-weight: 900;
            margin: 50px;
            background-image: linear-gradient(to bottom right, rgb(235, 169, 48), rgb(59, 153, 184));
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
    <div>
       <h1 class="heading">Html and Css</h1>
    </div>

output

That's All! play around with various css property, and can create amazing things. website can be visited which may help css tricks.

I hope you will find this helpful, any suggestions/mistake let me know in comment.

Thank you.