rentry gradient

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rentry gradient generator</title>
</head>
<body>
    <h2>rentry gradient generator</h2>
    <label for="word">text:</label>
    <input type="text" id="word" placeholder="your text">
    <br><br>
    <label for="startColor">first colour:</label>
    <input type="color" id="startColor">
    <br><br>
    <label for="endColor">end colour:</label>
    <input type="color" id="endColor">
    <br><br>
    <button onclick="generateGradientText()">gradient it</button>
    <div class="output" id="output"></div>

    <script>
            function generateGradientText() {
            const word = document.getElementById('word').value;
            const startColor = document.getElementById('startColor').value;
            const endColor = document.getElementById('endColor').value;
            const outputDiv = document.getElementById('output');

            function interpolateColor(color1, color2, factor) {
                const c1 = parseInt(color1.slice(1), 16);
                const c2 = parseInt(color2.slice(1), 16);
                const r = Math.round(((1 - factor) * (c1 >> 16) + factor * (c2 >> 16)));
                const g = Math.round(((1 - factor) * ((c1 >> 8) & 0xff) + factor * ((c2 >> 8) & 0xff)));
                const b = Math.round(((1 - factor) * (c1 & 0xff) + factor * (c2 & 0xff)));
                return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1).toUpperCase()}`;
            }

            let result = '';
            let filteredWord = word.replace(/\s+/g, ''); // Remove spaces
            for (let i = 0, j = 0; i < word.length; i++) {
                if (word[i] === ' ') {
                    result += ' ';
                } else {
                    const color = interpolateColor(startColor, endColor, j / (filteredWord.length - 1));
                    result +=...

CSS

body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }
        .output {
            font-size: 24px;
            margin-top: 20px;
        }