50Projects-HTML-CSS-JavaScript : Gradient background generator

[tajulafreen]

In this branch, I have established the project :

Gradient Background Generator

Summary:
This pull request adds a Gradient Background Generator to the project. The tool allows users to create custom gradient backgrounds by selecting two colors, viewing the corresponding CSS code, and copying it to the clipboard.

Features:

• Added color pickers for selecting two gradient colors.
• Implemented real-time gradient preview as users select colors.
• Displayed the generated CSS code for the gradient background.
• Included a copy button to easily copy the CSS code.
• Styled the tool with responsive design to ensure usability on all devices.
• Enhanced user experience with button animations and transitions.

Technologies Used:

• HTML: Structured the web page and form elements.
• CSS: Styled the interface, including animations and transitions.
• JavaScript: Handled user interactions and dynamic updates for the gradient background.

Changes:

• Created a new HTML structure for the gradient generator.
• Added CSS for styling the color pickers, buttons, and text display.
• Implemented JavaScript functionality for generating and displaying the gradient background and CSS code.
• Added a copy button with styling and functionality.

Demo:

Instructions:

• Open the Gradient Background Generator page.
• Use the color pickers to select your desired gradient colors.
• Copy the generated CSS code by clicking the copy button.
• Apply the gradient background to your own projects!
• This feature enhances the project by providing a practical and interactive tool for users to create beautiful gradient backgrounds easily.