Skip to content

Latest commit

 

History

History
152 lines (90 loc) · 11.3 KB

README.md

File metadata and controls

152 lines (90 loc) · 11.3 KB
Raw

magic css

Magic CSS 🧙‍♂️

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. 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.

Awesome Made With Love

Star this project

Table of Contents

Features

  • 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.
  • 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.
  • 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.
  • 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.

Demo

Experience the convenience and power of the CSS Value Generator by visiting the demo page and start creating stunning CSS effects effortlessly.

You can try out the Magic CSS by following this demo link.

Open in StackBlitz

Prerequisites

In order to run this project, you will need to have the following installed on your computer:

  • nodejs
  • yarn | npm

Installation

To install the application, follow these steps:

  1. Clone the repository to your local machine:
git clone https://github.com/Silent-Watcher/magic-Css
  1. Navigate to the project directory in your terminal.
  cd magic-Css
  1. Run yarn to install the necessary packages.
  yarn

usage

To start the application, run yarn dev. This will start the application on http://localhost:5173.

yarn dev

  1. Choose the desired CSS property from the navigation menu: box-shadow, text-shadow, gradient, or border radius.

  2. 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.

  3. Copy the generated CSS code with a single click and use it in your project.

  4. 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.

  5. Experiment with different values and variations until you achieve the desired effect.

Acknowledgements

Technologies

HTML5 CSS JavaScript Sass Vite

Why Use CSS Value Generator?

  • 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.

  • 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.

  • User-Friendly Interface: The app features an intuitive and user-friendly interface, making it accessible to both beginners and experienced developers.

  • Cross-Browser Compatibility: The generated CSS values are compatible with major web browsers, ensuring consistent rendering across different platforms.

  • Open Source: The app is open source, allowing you to explore the codebase, contribute improvements, or customize it to suit your specific needs.

Contributing

Contributions to this project are welcome. If you encounter any issues or have suggestions for improvement, please open an issue on the GitHub repository.

Before contributing, please review the contribution guidelines.

Contact

For additional information or inquiries, you can reach out to the project maintainer:

Feel free to contact the maintainer for any questions or feedback regarding the project.

License 🔐

MIT

This 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.

Sponsor ❤

If you like this project, please give it a star ⭐ and/or consider buying me a coffee(s). Every donation is appreciated.