/Code-Magic

Code Generator - Easily Generate CSS and Tailwind code based on your choice and input

Primary LanguageTypeScriptMIT LicenseMIT


πŸš€ About

Code Magic is a website where you can get simple CSS tricks to make your application elegant with just few clicks.

code magic v2

πŸ§™β€β™€οΈ Magic options available for you:

  • Pic Text - Convert images to CSS art. Just upload and get CSS art with just one click.
  • Gradient Text - Dual color gradient for your texts.
  • Gradient Border - Get dual color gradient with desired radius.
  • Gradient Background - Make your backgrounds stand out by applying gradient colors.
  • Animations
    • Select one of the below options

      Skew

      Fade

      Spin

    • Set duration and speed for the animations
    • And boom
  • Box Shadow - Cast a shadow on your element.
  • Border Radius - Get desired border radius for your element.
  • Text Shadow - Create a cool shadow for your text.
  • Input Range - Style your range input type elements easily and quickly

βš’οΈ Languages / Tools

HTML
HTML
CSS
CSS
Typescript
TypeScript

πŸ§‘πŸΎβ€πŸ’» Demo

Check out the website: Code Magic

πŸ‘‡πŸ½ Prerequisites

Before installation, please make sure you have already installed the following tools:

πŸ‘ŒπŸΎ What you have to do to contribute

πŸ› οΈ Installation Steps

  1. Fork the project. Click on the icon in the top right to get started
  2. Clone the project, you can use the following command:
git clone https://github.com/<your-github-username>/Code-Magic
  1. Navigate to the project directory
cd Code-Magic
  1. Install dependencies with npm install
npm install
npm install -g commitizen
  1. Run the project
npm run dev

πŸ₯‚ After making a change

  1. Create a new branch
git checkout -b YourBranchName
  1. Add it to staging area

NOTE: don't commit the package.json

git add <path to the file you worked on>
  1. Commit your changes with
git cz
  1. Push your changes
git push

πŸ‘¨β€πŸ‘©β€πŸ‘¦ Community

Don't forget to join the discord community - Join us

πŸ‘©πŸ½β€πŸ’» Contributing

  • Contributions make the open source community such an amazing place to learn, inspire, and create.
  • Any contributions you make are greatly appreciated.
  • Check out our contribution guidelines for more information.

πŸ›‘οΈ License

Code-Magic is licensed under the MIT License - see the LICENSE file for details.

πŸ’ͺ🏽 Thanks to all Contributors

Thanks a lot for spending your time helping Code-Magic grow. Thanks a lot! Keep rocking🍻

Contributors

πŸ™πŸ½ Support

This project needs a star️ from you. Don't forget to leave a star✨