Gradient Background Generator

A powerful Next.js application for creating stunning SVG gradient backgrounds with real-time preview and customizable color palettes.

Features

• Real-time Preview: See your gradient backgrounds update instantly as you modify colors
• Custom Color Palettes: Add up to 8 colors to create unique gradients
• Preset Templates: Choose from professionally designed color combinations
• API Integration: Generate gradients programmatically via REST API
• SVG Export: Download your creations as high-quality SVG files
• Responsive Design: Works seamlessly on desktop and mobile devices

Getting Started

Read the documentation at https://opennext.js.org/cloudflare.

Develop

Run the Next.js development server:

npm run dev
# or similar package manager command

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Preview

Preview the application locally on the Cloudflare runtime:

npm run preview
# or similar package manager command

Deploy

Deploy the application to Cloudflare:

npm run deploy
# or similar package manager command

Custom Domain

The deployed application is available at:

gbg.nuclearrockstone.xyz

Configure your DNS and Cloudflare settings accordingly (add the appropriate CNAME/A records and route the domain to your Cloudflare deployment).

API Usage

Generate gradients programmatically using the REST API:

GET https://gbg.nuclearrockstone.xyz/api?colors=hex_FF0000&colors=hex_00FF00&width=800&height=600

Parameters:

• colors: Hex colors with hex_ prefix (e.g., hex_FF0000 for red)
• width: Image width in pixels (100-2000)
• height: Image height in pixels (100-2000)

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!