Merge two images using CSS clip property

We all have come across this situation, when there is a need of showing some part of one image and some part of another image, developers usually prefer to get a new image from designer without knowing this, that they can also combine the images with the help of CSS. A very good example of this problem is whenever the developer wants to show half rated stars like 1.5, 2.5 or averaged stars like 2.7, 1.3. To fix this problem clip property of CSS can be used.

The clip property of CSS can be used to merge two images. Let’s suppose that we have two same images with different color and we want to show some part of the first image and some part of the second image, then at that time we can use this property.

Let’s suppose we have the following two images:

1. StarRed


2. StarRated


CSS Syntax:

Clip: rect(top,right,bottom,left);


Clip: rect(0px 30px 30px 0px);

HTML to fetch images:

<img src=” Icons/StarRed.png”>
<img src=” Icons/StarRated.png”>

Let’s have a look to different ways to use clip property by applying CSS.

Demo 1:

.container .firstImg{position:absolute;clip:rect(0px 50px 128px 0px);}


Demo 2:

.container .firstImg {position: absolute; clip: rect(0px 64px 128px 0px);}


Demo 3:

.container .firstImg {position: absolute; clip: rect(0px 128px 64px 0px);}


Demo 4:

.container .firstImg {position: absolute; clip: rect(0px 128px 80px 0px);}


Demo 5:

.container .firstImg {position: absolute; clip: rect(46px 90px 99px 38px);}


There is lots of information provided of clip property on this link Clip CSS Property. If you have any query or need more information about clip property? Contact us today at +1 -484-876-1867 or send us a message.

Related Posts

Leave a comment