homayunmmdy / Box-shadow-generator

This project is a simple box-shadow CSS generator built using Vite and React. It allows users to customize various parameters of a box-shadow such as Horizontal and Vertical offset, Blur, Spread, Color, Opacity, and Inset.

box-shadow.webm

Box-Shadow CSS Generator

This project is a simple box-shadow CSS generator built using Vite and React. It allows users to customize various parameters of a box-shadow such as Horizontal and Vertical offset, Blur, Spread, Color, Opacity, and Inset.

Features

• Horizontal Offset: Adjust the horizontal positioning of the shadow relative to the element.
• Vertical Offset: Customize the vertical positioning of the shadow relative to the element.
• Blur: Control the blurriness of the shadow, giving it a softer or sharper appearance.
• Spread: Adjust the size of the shadow, either expanding or contracting it.
• Color: Choose the color of the shadow from a color picker.
• Opacity: Control the transparency of the shadow, allowing for subtle or pronounced effects.
• Inset: Toggle between an outer shadow and an inset shadow for different visual effects.

Installation

1. Clone the repository: git clone <repository-url>
2. Navigate to the project directory: cd box-shadow-generator
3. Install dependencies: npm install or yarn install

Usage

1. Start the development server: npm run dev or yarn dev
2. Open your browser and navigate to http://localhost:3000
3. Adjust the sliders and color picker to customize the box-shadow.
4. Copy the generated CSS code and use it in your project.

Technologies Used

• Vite: A fast build tool that provides a lightning-fast development experience for web projects.
• React: A JavaScript library for building user interfaces, used for creating the dynamic UI of the generator.
• CSS: Used to apply the box-shadow styles and dynamically update the preview.

Contributing

Contributions are welcome! If you have any suggestions, bug fixes, or feature implementations, feel free to open an issue or create a pull request.