CSSGradientGenerator.mp4

Gradient Generator

This project is a gradient generator built using Vite, React, and TypeScript. It allows users to dynamically generate CSS color gradients and customize their orientation.

Features

• Generate linear or radial gradients.
• Choose the orientation of the gradient.
• Select colors using a color picker.
• View the generated CSS code.

Installation

1. Clone the repository.
2. Navigate to the project directory.
3. Run npm install to install dependencies.
4. Run npm run dev to start the development server.

Usage

1. Choose the orientation of the gradient by clicking on the corresponding arrow buttons or the radial button.
2. Use the color pickers to select the starting and ending colors of the gradient.
3. View the generated CSS code in the box below.
4. Copy the CSS code and use it in your project.

Dependencies

• chroma-js: A library for color manipulation.
• react-color: A collection of color pickers for React.
• Vite: A next-generation frontend tooling.
• React: A JavaScript library for building user interfaces.
• TypeScript: A statically typed superset of JavaScript.