Text Color Gradient

#webdev #css #beginners

This is the simplest way I found to create a beautiful text gradient effect like the one you can find on Apple Products

<div class="title gradient">
    <h1>Text Gradient</h1>
    <h2>width CSS</h2>
</div>

.gradient {
    /* add the colour effect as background */
    background-image: linear-gradient( 90deg, #1e3791 0%, #2948b1 40%, #3153c6 55%, #385fda 60% );

    /* clip the background so only the text is visible */
    background-clip: text;
    -webkit-background-clip: text;

    /* set the text color to transparent so the background colour is visible */
    color: transparent;
}