CSS text effect style : demo 173

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Playfair Display)
                    .text-effect{
                        color: #fff;
                        background: linear-gradient(to right top, #ffff34, #ffc812, #ff8f2f, #ff554d, #eb1267);
                        background-size: 50% auto;
                        font-family: 'Concert One', cursive;
                        font-size: 100px;
                        font-weight: 700;
                        text-align: center;
                        -webkit-background-clip: text;
                        -moz-background-clip: text;
                        background-clip: text;
                        -webkit-text-fill-color: transparent;
                        -moz-text-fill-color: transparent;
                        text-fill-color: transparent;
                        animation: gradientAnim 1s ease  alternate infinite;
                    }
                    @keyframes gradientAnim{
                        to { background-position: 180% top; }   
                    }
                    @media only screen and (max-width: 990px){
                        .text-effect{ font-size: 80px; }
                    }
                    @media only screen and (max-width: 767px){
                        .text-effect{ font-size: 60px; }
                    }
                    @media only screen and (max-width: 576px){
                        .text-effect{ font-size: 45px; }
                    }
                    
License Terms