Professional Web Templates

HTML

<div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="counter">
                <span class="counter-value">1963</span> 
                <h3>Web Designing</h3>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="counter purple">
                <span class="counter-value">1854</span> 
                <h3>Web Development</h3>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="counter green">
                <span class="counter-value">1756</span>
                <h3>Brand Building</h3>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="counter red">
                <span class="counter-value">1823</span>
                <h3>Responsive Design</h3>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

CSS

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
:root{
    --color1: #BAF016;
    --color2: #339F0F;
}
body{ background-color: #eee; }

.counter{
    color: #111;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
    width: 190px;
    padding: 0 15px 15px;
    margin: 50px auto 0;
    position: relative;
    z-index: 1;
}
.counter:before,
.counter:after{
    content: '';
    background-color: #fff;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    position: absolute;
    left: 0;
    top: 75px;
    bottom: 0;
    right: 0;
    z-index: -1;
}
.counter:after{
    background: linear-gradient(var(--color2),var(--color1));
    height: 93px;
    border-radius: 0 0 150px 150px;
    bottom: auto;
}
.counter .counter-value{
    color: #fff;
    background: linear-gradient(var(--color1),var(--color2));
    font-size: 35px;
    font-weight: 700;
    line-height: 150px;
    width: 150px;
    height: 150px;
    margin: 0 auto 28px;
    border-radius: 50%;
    display: block;
}
.counter h3{
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 25px;
    text-transform: capitalize;
    margin: 0;
}
.counter.purple{ 
    --color1: #BA53D7;
    --color2: #8536AD;
}
.counter.green{ 
    --color1: #06CFB4;
    --color2: #00778B;
}
.counter.red{ 
    --color1: #f32626;
    --color2: #8b0000;
}
@media screen and (max-width:990px){
    .counter{ margin-bottom: 40px; }
}

HTML

CSS

JS

Output