https://github.com/k-urtica/gradient-text-pro

CSS Gradient Text Generator!
https://github.com/k-urtica/gradient-text-pro

css-generator gradient-text nuxt4 nuxtui tailwindcss text-gradients tool vue

Last synced: 5 months ago
JSON representation

CSS Gradient Text Generator!

• Host: GitHub
• URL: https://github.com/k-urtica/gradient-text-pro
• Owner: k-urtica
• License: mit
• Created: 2025-09-13T03:58:03.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-11-26T02:41:15.000Z (6 months ago)
• Last Synced: 2025-11-29T05:34:28.249Z (6 months ago)
• Topics: css-generator, gradient-text, nuxt4, nuxtui, tailwindcss, text-gradients, tool, vue
• Language: Vue
• Homepage: https://gradient-text-pro.web-toolbox.dev/
• Size: 666 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

🌈 Gradient Text Pro




  





  Advanced CSS Gradient Text Generator





  🔗 Open App •

  Features •

  How to Use •

  Technology Stack •

  Installation •

  License



## 📝 Overview

Gradient Text Pro is a powerful web tool for creating stunning CSS gradient text effects with real-time preview.

Easily customize linear, radial, and conic gradients with multiple color stops, modern OKLCH color space support, typography settings, instant CSS code generation, and high-quality image export.

Perfect for creating eye-catching headlines, logos, and web interfaces with professional gradient text designs that leverage cutting-edge color technology.

## ✨ Features

- 🌈 Create linear, radial, and conic gradient text effects

- 🎨 Advanced color stop control with custom positioning

- 🖌️ Modern OKLCH color space support for smoother, more natural gradients

- 🔤 Typography settings: font size, weight, letter spacing, and line height

- 👀 Real-time preview of gradient text designs

- 📋 One-click CSS code generation and copy

- 🖼️ High-quality image export in PNG, WebP, and SVG formats with customizable scale

- 🎯 Preset library with popular gradient combinations

- 🌓 Light/Dark theme toggle

- 📱 Responsive UI for mobile and desktop

- ⚡ Smooth animations and intuitive controls

## 🚀 How to Use

1. Enter your text in the main input field to see gradient effects applied

2. Choose from gradient presets or create custom gradients using color stops

3. Select gradient type (linear, radial, or conic) and adjust the angle

4. Choose between HEX (classic) or OKLCH (modern) color format for optimal results

5. Fine-tune typography settings like font size, weight, and spacing

6. Copy the generated CSS code with one click or export as high-quality images

7. For image export, select format (PNG/WebP/SVG) and scale (1x-3x) then click export

8. Use the code or images directly in your web projects

## 💻 Technology Stack

- [Nuxt 4](https://nuxt.com/)

- [NuxtUI](https://ui.nuxt.com/)

## 🔧 Installation

```bash

git clone https://github.com/k-urtica/gradient-text-pro.git

cd gradient-text-pro

pnpm install

pnpm dev

```

## 🔗 URL

[https://gradient-text-pro.web-toolbox.dev/](https://gradient-text-pro.web-toolbox.dev/)

## 📄 License

This project is licensed under the [MIT](https://opensource.org/licenses/MIT) License.

Copyright © 2025 K.

## 👨‍💻 Developer

👤 **K**

- Twitter: [@k_urtica](https://twitter.com/k_urtica)

- GitHub: [@k-urtica](https://github.com/k-urtica)