Case Converter tool with colorful styling and all its features use any free library...

 

Case Converter Tool

Converted Text

* { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f0f0f0; } .container { max-width: 600px; margin: 50px auto; text-align: center; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; } textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 20px; resize: none; } .buttons { display: flex; justify-content: space-around; margin-bottom: 20px; } button { padding: 10px 15px; border: none; border-radius: 5px; background-color: #3498db; color: white; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #2980b9; } button:active { transform: scale(0.98); } h2 { color: #333; } #outputText { background: #f9f9f9; } document.getElementById('toUpperCaseBtn').addEventListener('click', () => { const inputText = document.getElementById('inputText').value; document.getElementById('outputText').value = inputText.toUpperCase(); }); document.getElementById('toLowerCaseBtn').addEventListener('click', () => { const inputText = document.getElementById('inputText').value; document.getElementById('outputText').value = inputText.toLowerCase(); }); document.getElementById('toTitleCaseBtn').addEventListener('click', () => { const inputText = document.getElementById('inputText').value; const titleCase = inputText.split(' ') .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) .join(' '); document.getElementById('outputText').value = titleCase; }); document.getElementById('clearBtn').addEventListener('click', () => { document.getElementById('inputText').value = ''; document.getElementById('outputText').value = ''; });