ProDevZone Advanced Gradient Generator

ProDevZone

Advanced Generator

v3.5 Pro

Live Preview

Gradient Master

Copied to Clipboard! Ready to paste into your project.

-->`; let js = jsSig; if (d.nMode === 'track' || (d.hEnabled && d.hMode === 'track')) { js += `document.addEventListener("DOMContentLoaded", () => { const heading = document.querySelector('.${d.cls}'); if(heading) { heading.parentElement.addEventListener('mousemove', (e) => { const rect = heading.getBoundingClientRect(); heading.style.setProperty('--x', (e.clientX - rect.left) + 'px'); heading.style.setProperty('--y', (e.clientY - rect.top) + 'px'); }); heading.parentElement.addEventListener('mouseleave', () => { heading.style.setProperty('--x', '50%'); heading.style.setProperty('--y', '50%'); }); } });`; } else { js += `// No JavaScript required for this setup.`; }document.getElementById('codeHtml').value = html; document.getElementById('codeCss').value = css; document.getElementById('codeJs').value = js; }function getAnimDuration(anim) { if (anim === 'hue') return '4s linear'; if (anim === 'pulse') return '2s ease-in-out'; if (anim === 'float') return '3s ease-in-out'; if (anim === 'shake') return '0.4s linear'; if (anim === 'beat') return '1.5s ease-in-out'; return '3s linear'; }const kfs = document.createElement("style"); kfs.innerText = ` @keyframes text-shine { to { background-position: 200% center; } } @keyframes text-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes text-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } @keyframes text-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes text-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } @keyframes text-beat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } } `; document.head.appendChild(kfs);function copyCurrentCode() { let el; if (currentTab === 'html') el = document.getElementById('codeHtml'); if (currentTab === 'css') el = document.getElementById('codeCss'); if (currentTab === 'js') el = document.getElementById('codeJs'); el.select(); document.execCommand('copy'); const t = document.getElementById('toast'); t.classList.remove('translate-y-32', 'opacity-0'); setTimeout(() => t.classList.add('translate-y-32', 'opacity-0'), 2500); }toggleInputs('normal'); toggleInputs('hover'); toggleInputs('shadow'); setTimeout(updatePreview, 100);

Calculator

Converter

CSS Tools

Image Tools

Miscellaneous Tools

Other Tools

PDF Tools

Text Tools

Web Design Tools

Web Tools

Saved Tools

Report a Tool or Issue

ProDevZone

Gradient Master

Best Online All-in-One Toolbox