Skip to content

Latest commit

Β 

History

History
42 lines (27 loc) Β· 1.32 KB

File metadata and controls

42 lines (27 loc) Β· 1.32 KB

Gradient Generator

A simple tool to generate CSS gradients.

πŸš€ Generate Text Gradients!

Features

  • 🎨 Create linear gradients with multiple color stops.
  • πŸ–ŒοΈ Interactively change colors using a color picker.
  • ✨ Add or remove colors from the gradient.
  • πŸ”„ Adjust the gradient angle using a degree picker.
  • πŸ–οΈ Drag and drop to reorder colors.
  • πŸ“‹ View and copy the generated CSS snippet.

How to Use

  1. Add Colors: Click the 'βž•' icon to add a new color to the gradient.
  2. Change Colors: Click on any color swatch to open the color picker and select a new color.
  3. Remove Colors: Click the 'πŸ—‘οΈ' icon next to a color to remove it.
  4. Adjust Angle: Use the degree picker to set the angle of the gradient.
  5. Copy CSS: The CSS code for the gradient is automatically generated. Click the copy button in the code snippet section to copy it to your clipboard.

Screenshots

Gradient Generator App


Local Development

To start a local development server, run:

ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.