{"id":22602224,"url":"https://github.com/silent-watcher/magic-css","last_synced_at":"2025-04-11T02:42:32.308Z","repository":{"id":148851628,"uuid":"522562773","full_name":"Silent-Watcher/magic-Css","owner":"Silent-Watcher","description":"🧙‍♂️The Magic CSS is an intuitive web application that allows you to generate CSS values for commonly used properties. Leave a star before you leave ⭐ ","archived":false,"fork":false,"pushed_at":"2024-01-11T12:13:35.000Z","size":383,"stargazers_count":35,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T06:56:50.661Z","etag":null,"topics":["code-generator","css-styling","css-tool","css-utilites","hacktoberfest","open-source","web-design","web-development-tools"],"latest_commit_sha":null,"homepage":"https://magic-css.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Silent-Watcher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":"FUNDING.yml","license":"license","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"custom":["https://reymit.ir/tabataba"]}},"created_at":"2022-08-08T13:33:58.000Z","updated_at":"2025-03-13T12:54:38.000Z","dependencies_parsed_at":"2024-01-11T14:52:49.693Z","dependency_job_id":"327ad17c-debf-45fc-9246-f8ebddfca53e","html_url":"https://github.com/Silent-Watcher/magic-Css","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Silent-Watcher%2Fmagic-Css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Silent-Watcher%2Fmagic-Css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Silent-Watcher%2Fmagic-Css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Silent-Watcher%2Fmagic-Css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Silent-Watcher","download_url":"https://codeload.github.com/Silent-Watcher/magic-Css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248331182,"owners_count":21085854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-generator","css-styling","css-tool","css-utilites","hacktoberfest","open-source","web-design","web-development-tools"],"created_at":"2024-12-08T12:19:23.413Z","updated_at":"2025-04-11T02:42:32.286Z","avatar_url":"https://github.com/Silent-Watcher.png","language":"JavaScript","funding_links":["https://reymit.ir/tabataba"],"categories":[],"sub_categories":[],"readme":"\n![magic css](https://github.com/Silent-Watcher/magic-Css/blob/master/public/img/banner.png)\n\n# Magic CSS 🧙‍♂️\n\n The Magic CSS is an intuitive web application that allows you to generate CSS values for commonly used properties such as box-shadow, text-shadow, gradient, and border radius. \n With this app, you can easily create custom styles and enhance the visual appeal of your web projects without the need for manual calculations or complex CSS coding.\n\n\u003cp dir=\"auto\"\u003e\u003ca href=\"https://github.com/sindresorhus/awesome\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/abb97269de2982c379cbc128bba93ba724d8822bfbe082737772bd4feb59cb54/68747470733a2f2f63646e2e7261776769742e636f6d2f73696e647265736f726875732f617765736f6d652f643733303566333864323966656437386661383536353265336136336531353464643865383832392f6d656469612f62616467652e737667\" alt=\"Awesome\" data-canonical-src=\"https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e \u003ca href=\"https://github.com/chetanraj/awesome-github-badges\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/ff817852f0d676a36eaa3108d380e0052e689d9e0bc3eb42818fb21008708420/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d616465253230576974682d4c6f76652d6f72616e67652e737667\" alt=\"Made With Love\" data-canonical-src=\"https://img.shields.io/badge/Made%20With-Love-orange.svg\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\n[![Star this project](https://img.shields.io/badge/-⭐%20Star%20this%20project-yellow?style=for-the-badge)](https://github.com/Silent-Watcher/cli-word-guessing-game)\n\n## Table of Contents\n\n-   [Features](https://github.com/Silent-Watcher/magic-Css#features)\n-   [demo](https://github.com/Silent-Watcher/magic-Css#demo)\n-   [Prerequisites](https://github.com/Silent-Watcher/magic-Css#Prerequisites)\n-   [Installation](https://github.com/Silent-Watcher/magic-Css#Installation)\n-   [usage](https://github.com/Silent-Watcher/magic-Css#usage)\n-   [Acknowledgements](https://github.com/Silent-Watcher/magic-Css#Acknowledgements)\n-   [Contributing](https://github.com/Silent-Watcher/magic-Css#Contributing)\n-   [Contact](https://github.com/Silent-Watcher/magic-Css#Contact)\n-   [License](https://github.com/Silent-Watcher/magic-Css#License)\n\n## Features\n\n- **Box-shadow Generation** : Generate visually appealing box-shadow effects by specifying values for parameters such as color, blur radius, spread, and position. Experiment with different combinations to achieve the desired shadow effect for your elements.\n- **Text-shadow Generation** : Create eye-catching text-shadow effects by selecting values for color, blur radius, and position. Instantly preview the generated text-shadow and fine-tune it until it perfectly complements your website's design.\n- **Gradient Generation** : Design stunning gradients by selecting colors and configuring the direction and type of gradient. Whether you need linear or radial gradients, this app offers a user-friendly interface to create gradients effortlessly.\n- **Border Radius Generation** : Customize the border radius of your elements with ease. Specify values for individual corners or apply the same radius to all corners. The app provides a visual representation of the generated border radius for quick visual feedback.\n\n\n## Demo\n\nExperience the convenience and power of the CSS Value Generator by visiting the demo page and start creating stunning CSS effects effortlessly.\n\nYou can try out the Magic CSS by following this [demo link.](https://magic-css.netlify.app/)\n\u003cp\u003e\n \n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/Silent-Watcher/magic-Css)\n\n\u003c/p\u003e\n\n\n## Prerequisites\n\nIn order to run this project, you will need to have the following installed on your computer:\n- nodejs\n- yarn | npm\n\n## Installation\n\nTo install the application, follow these steps:\n\n1.  Clone the repository to your local machine:\n\n \n```bash\ngit clone https://github.com/Silent-Watcher/magic-Css\n```\n\n2. Navigate to the project directory in your terminal.\n\n \n```bash\n  cd magic-Css\n```\n3. Run `yarn` to install the necessary packages.\n\n \n```bash\n  yarn\n```\n\n## usage\n\nTo start the application, run yarn dev. This will start the application on http://localhost:5173.\n\n```bash\nyarn dev\n```\n\n1. Choose the desired CSS property from the navigation menu: box-shadow, text-shadow, gradient, or border radius.\n\n2. Adjust the sliders, input fields, or color pickers to set the values for the respective property. The app provides real-time previews to help you visualize the changes.\n\n3. Copy the generated CSS code with a single click and use it in your project.\n\n4. For gradients, you can also copy the generated gradient code as a CSS background property, making it easy to apply the gradient to any element in your HTML.\n\n5. Experiment with different values and variations until you achieve the desired effect.\n\n## Acknowledgements\n\n - [The build tool and development server.](https://vitejs.dev/)\n - [The package manager used in the project.](https://yarnpkg.com/)\n\n## Technologies\n\n\u003cp\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/96a539d0f4942d7f622d96b43372b8e6038ff508e690609b1ffc1fc3108025bb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d48544d4c352d3030303f266c6f676f3d68746d6c35266c6f676f436f6c6f723d453334463236\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/96a539d0f4942d7f622d96b43372b8e6038ff508e690609b1ffc1fc3108025bb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d48544d4c352d3030303f266c6f676f3d68746d6c35266c6f676f436f6c6f723d453334463236\" alt=\"HTML5\" data-canonical-src=\"https://img.shields.io/badge/-HTML5-000?\u0026amp;logo=html5\u0026amp;logoColor=E34F26\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/9aa9859905af6a3b26edde4a73cf1974ed9ae204b16f24f4b704b5cafe1159c2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4353532d3030303f266c6f676f3d63737333266c6f676f436f6c6f723d313537324236\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/9aa9859905af6a3b26edde4a73cf1974ed9ae204b16f24f4b704b5cafe1159c2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4353532d3030303f266c6f676f3d63737333266c6f676f436f6c6f723d313537324236\" alt=\"CSS\" data-canonical-src=\"https://img.shields.io/badge/-CSS-000?\u0026amp;logo=css3\u0026amp;logoColor=1572B6\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n \u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/4b4858ab474b4aaf1d67602c602f1149a7666b04563d1e674a21922d66537b14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4a6176615363726970742d3030303f266c6f676f3d4a617661536372697074266c6f676f436f6c6f723d646463353038\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/4b4858ab474b4aaf1d67602c602f1149a7666b04563d1e674a21922d66537b14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4a6176615363726970742d3030303f266c6f676f3d4a617661536372697074266c6f676f436f6c6f723d646463353038\" alt=\"JavaScript\" data-canonical-src=\"https://img.shields.io/badge/-JavaScript-000?\u0026amp;logo=JavaScript\u0026amp;logoColor=ddc508\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/404617cc3b075fbc7b1483a9b43d0f6be4aeec1bbd464bf51651c572414009c7/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d536173732d3030303f266c6f676f3d53617373\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/404617cc3b075fbc7b1483a9b43d0f6be4aeec1bbd464bf51651c572414009c7/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d536173732d3030303f266c6f676f3d53617373\" alt=\"Sass\" data-canonical-src=\"https://img.shields.io/badge/-Sass-000?\u0026amp;logo=Sass\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/9931d101c80aa7cef99bbc377a51936afeb68674645815f815b851fd8de8c470/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d566974652d3030303f266c6f676f3d56697465\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/9931d101c80aa7cef99bbc377a51936afeb68674645815f815b851fd8de8c470/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d566974652d3030303f266c6f676f3d56697465\" alt=\"Vite\" data-canonical-src=\"https://img.shields.io/badge/-Vite-000?\u0026amp;logo=Vite\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Why Use CSS Value Generator?\n\n- **Saves Time and Effort**: Instead of manually calculating CSS values or searching for code snippets online, the CSS Value Generator automates the process, saving you valuable time and effort.\n\n- **Enhances Visual Appeal**: By providing an easy way to generate CSS values for commonly used properties, this app helps you create visually appealing designs that stand out.\n\n- **User-Friendly Interface**: The app features an intuitive and user-friendly interface, making it accessible to both beginners and experienced developers.\n\n- **Cross-Browser Compatibility**: The generated CSS values are compatible with major web browsers, ensuring consistent rendering across different platforms.\n\n- **Open Source**: The app is open source, allowing you to explore the codebase, contribute improvements, or customize it to suit your specific needs.\n\n## Contributing  \u003cimg src=\"https://github.com/0xAbdulKhalid/0xAbdulKhalid/raw/main/assets/mdImages/handshake.gif\" width =\"60\"\u003e\n\nContributions to this project are welcome. \nIf you encounter any issues or have suggestions for improvement, please open an issue on the GitHub repository.\n\nBefore contributing, please review the contribution guidelines.\n\n## Contact\n\nFor additional information or inquiries, you can reach out to the project maintainer:\n\n- Name: Silent-Watcher\n- Email: alitabatabaee20@mail.com\n\nFeel free to contact the maintainer for any questions or feedback regarding the project.\n\n## License 🔐\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\nThis project is licensed under the MIT License. You are free to modify, distribute, and use the code for personal and commercial purposes. See the LICENSE file for details.\n\n## Sponsor ❤\nIf you like this project, please give it a star ⭐ and/or consider buying me a coffee(s). Every donation is appreciated.\n\n\u003ca href=\"https://www.coffeete.ir/silentwatcher\" rel=\"nofollow\"\u003e\n    \u003cimg width=\"120px\" src=\"https://camo.githubusercontent.com/ab6dddafd2bdfc2a0e66b6f4eae6f508a308c085a3093bea8b1a143ac909f14a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4275795f4d655f415f436f666665652d4646444430303f7374796c653d666f722d7468652d6261646765266c6f676f3d6275792d6d652d612d636f66666565266c6f676f436f6c6f723d626c61636b\" data-canonical-src=\"https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge\u0026amp;logo=buy-me-a-coffee\u0026amp;logoColor=black\" style=\"max-width: 100%;\"\u003e\n\u003c/a\u003e\n\n\u003ca target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/6038c8f1fd8f60de75477470e5a87210e9256202e01dfba9986446304a0f0254/68747470733a2f2f63617073756c652d72656e6465722e76657263656c2e6170702f6170693f747970653d776176696e6726636f6c6f723d6772616469656e74266865696768743d36302673656374696f6e3d666f6f746572\"\u003e\u003cimg src=\"https://camo.githubusercontent.com/6038c8f1fd8f60de75477470e5a87210e9256202e01dfba9986446304a0f0254/68747470733a2f2f63617073756c652d72656e6465722e76657263656c2e6170702f6170693f747970653d776176696e6726636f6c6f723d6772616469656e74266865696768743d36302673656374696f6e3d666f6f746572\" data-canonical-src=\"https://capsule-render.vercel.app/api?type=waving\u0026amp;color=gradient\u0026amp;height=60\u0026amp;section=footer\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilent-watcher%2Fmagic-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsilent-watcher%2Fmagic-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsilent-watcher%2Fmagic-css/lists"}