BG Studio

BG Studio is a client-side background generator for solid colors, gradients, and export-ready image assets. It is built with React, Tailwind CSS, and the Canvas API.

Features

• Solid color generator with HEX, RGB, and HSL input
• Linear and radial gradient generator with editable color stops
• Canvas-based PNG and JPG export
• Responsive preview panel with image size presets
• Copy CSS background code and color values
• Share backgrounds with URL hash links
• Keyboard shortcuts for quick generation and export

Keyboard Shortcuts

• R: random background
• D: download current image
• C: copy CSS background Shortcuts are disabled while typing in form fields.

Tech Stack

• React
• Tailwind CSS
• Vite
• Canvas API
• localStorage for saved backgrounds

Getting Started

npm install
npm run dev

Then open the local URL printed by Vite.

Build

npm run build

Project Structure

src/
  components/
    SidebarSection.jsx
    StopEditor.jsx
  utils/
    canvasUtils.js
    colorUtils.js
    storage.js
  App.jsx
  index.css

Contributing

Contributions are welcome. Good first improvements include new background presets, accessibility polish, export formats, tests for color conversion helpers, and small UI refinements that preserve the current workflow.

License

MIT