CSS Generator

The CSS Generator is a web application that allows you to generate live CSS styles for an image. It provides controls to customize properties like box shadow, border, color, background color, opacity, padding, and margin.

Live Demo

You can try out the CSS Generator live by visiting the demo page.

How It Works

1. Upload your target image or specify the image URL.
2. Use the provided controls to adjust the CSS properties of the image, such as:
   • Box shadow: Control the shadow around the image.
   • Border: Set the border properties, including thickness, style, and color.
   • Color: Choose the foreground color of the image.
   • Background color: Set the background color behind the image.
   • Opacity: Adjust the transparency level of the image.
   • Padding: Add space inside the image container.
   • Margin: Set the space around the image container.
3. As you modify the controls, the CSS styles are applied in real-time to the image.

Technologies Used

The CSS Generator is built using the following technologies:

• HTML
• CSS
• JavaScript

How to Use

To use the CSS Generator locally, follow these steps:

1. Clone the repository: git clone https://github.com/Ajmal112/css-generator-using-js.git
2. Open index.html in your web browser.
3. Customize the CSS properties using the provided controls and see the changes applied to the image in real-time.

Feel free to explore and modify the code to suit your needs.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.

License

The CSS Generator is released under the MIT License.