Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mohamedsalem401/box-shadow-generator

Box Shadow Generator: Easily create and customize CSS box shadows for your web projects.
https://github.com/mohamedsalem401/box-shadow-generator

box-shadow box-shadow-css box-shadow-generator box-shadows-css css css-generator css-generators css3 react typescript

Last synced: 25 days ago
JSON representation

Box Shadow Generator: Easily create and customize CSS box shadows for your web projects.

Host: GitHub
URL: https://github.com/mohamedsalem401/box-shadow-generator
Owner: mohamedsalem401
Created: 2023-08-27T13:06:54.000Z (about 1 year ago)
Default Branch: master
Last Pushed: 2023-09-13T02:01:34.000Z (about 1 year ago)
Last Synced: 2023-09-13T10:15:12.051Z (about 1 year ago)
Topics: box-shadow, box-shadow-css, box-shadow-generator, box-shadows-css, css, css-generator, css-generators, css3, react, typescript
Language: TypeScript
Homepage: https://mohamedsalem401.github.io/Box-Shadow-Generator/
Size: 1.51 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

## Box-Shadow Generator

Box-Shadow Generator is a user-friendly web application that empowers you to easily create and customize CSS box shadows for your web elements. With this tool, you can generate the perfect box shadow to enhance the visual appeal of your website components.

![mohamedsalem401 github io_Box-Shadow-Generator_](https://github.com/mohamedsalem401/Box-Shadow-Generator/assets/67981832/77ccf486-4002-49fd-98d1-924f8c24bc50)
![mohamedsalem401 github io_Box-Shadow-Generator_ (1)](https://github.com/mohamedsalem401/Box-Shadow-Generator/assets/67981832/08805767-0abd-4bf1-90ed-f6132c7dcfba)

### Usage

1. Clone the repository:

```shell
git clone https://github.com/mohamedsalem401/Box-Shadow-Generator.git
```

2. Install dependencies:

```shell
cd Box-Shadow-Generator
npm install
```

3. Start the development server:

```shell
npm start
```

4. Open your preferred web browser and go to `http://localhost:3000` to access the application.

### Features

The Box-Shadow Generator offers the following features:

- Effortlessly create customized CSS box shadows to add depth and visual interest to your web elements.
- Modify various shadow properties, including:
- Horizontal Offset: Adjust the horizontal position of the shadow.
- Vertical Offset: Control the vertical position of the shadow.
- Blur Radius: Define the blurriness of the shadow's edges.
- Spread Radius: Determine the size of the shadow.
- Opacity: Set the transparency level of the shadow.
- Inset Option: Toggle whether the shadow is an inset shadow.
- Live Preview: Witness the changes in real-time as you adjust the shadow properties.
- Copy to Clipboard: Easily copy the generated CSS code for the shadow and paste it directly into your stylesheets.

### Contributing

Your contributions are highly valued! If you encounter any issues or have suggestions for enhancements, please don't hesitate to create an issue or submit a pull request on [GitHub](https://github.com/mohamedsalem401/Box-Shadow-Generator).

### License

This project is the intellectual property of Mohamed Yahia. All rights are reserved. No part of this project may be distributed or transmitted in any form or by any means, including copying, without the prior written permission of the owner.

For inquiries, please contact [email protected] :)