[html] sass,css 텍스트(p, h123 태그)에 그라데이션 색 넣기

 

 

    <div class="mid-title">
        <img src="./assets/img/icon_pop_title_rental&return.png" />
        <p>대여/반납 현황</p>
    </div>

<!-- sass -->
<style lang="sass" scoped>
.mid-title
    margin-top: 15px
    display: flex
    p
        margin-left: 10px
        font-size: 19px
        // 텍스트 그라데이션 효과
        background-image: linear-gradient(to left, #557fff, #04ca96)
        background-clip: text
        -webkit-background-clip: text
        color: transparent
 </style>
 
 <!-- css -->
<style>
.mid-title{
    margin-top: 15px
    display: flex
}
.mid-title .p{
    margin-left: 10px
    font-size: 19px
    // 텍스트 그라데이션 효과
    background-image: linear-gradient(to left, #557fff, #04ca96)
    background-clip: text
    -webkit-background-clip: text
    color: transparent
}
 </style>

 

결과물