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.
You can try out the CSS Generator live by visiting the demo page.
- Upload your target image or specify the image URL.
- 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.
- As you modify the controls, the CSS styles are applied in real-time to the image.
The CSS Generator is built using the following technologies:
- HTML
- CSS
- JavaScript
To use the CSS Generator locally, follow these steps:
- Clone the repository:
git clone https://github.com/Ajmal112/css-generator-using-js.git
- Open
index.html
in your web browser. - 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.
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
The CSS Generator is released under the MIT License.