{"id":28073533,"url":"https://github.com/nishantapps/shadowizard","last_synced_at":"2025-05-12T22:59:43.824Z","repository":{"id":65943508,"uuid":"602984930","full_name":"nishantapps/shadowizard","owner":"nishantapps","description":"Shadowizard  is an open-source library for generating customizable box shadows using CSS. It allows developers to quickly and easily create visually appealing box shadows by providing a simple syntax for specifying the parameters of the shadow.  With Shadowizard, developers can generate a wide variety of box shadows, including inset shadows.","archived":false,"fork":false,"pushed_at":"2023-11-01T16:48:14.000Z","size":82,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-26T11:03:23.477Z","etag":null,"topics":["box-shadows","cross-browser-compatibility","css","customizable","developerso","github","inset-shadows","library","lightweight","multiple-shadows","open-source","text-shadows","ui-design","visual-design","web-development"],"latest_commit_sha":null,"homepage":"http://shadowizard.apsa-developers.software/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nishantapps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"npmnishantsharma","patreon":"Developerso"}},"created_at":"2023-02-17T11:20:53.000Z","updated_at":"2023-11-06T03:10:05.000Z","dependencies_parsed_at":"2023-07-14T12:58:31.885Z","dependency_job_id":"10f59c46-e094-4bcf-89db-291af8f65194","html_url":"https://github.com/nishantapps/shadowizard","commit_stats":null,"previous_names":["nishantapps/shadowizard","developerso/shadowizard"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishantapps%2Fshadowizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishantapps%2Fshadowizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishantapps%2Fshadowizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishantapps%2Fshadowizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nishantapps","download_url":"https://codeload.github.com/nishantapps/shadowizard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252847479,"owners_count":21813451,"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":["box-shadows","cross-browser-compatibility","css","customizable","developerso","github","inset-shadows","library","lightweight","multiple-shadows","open-source","text-shadows","ui-design","visual-design","web-development"],"created_at":"2025-05-12T22:59:42.954Z","updated_at":"2025-05-12T22:59:43.811Z","avatar_url":"https://github.com/nishantapps.png","language":"JavaScript","readme":"# Shadowizard \nShadowizard is a simple, customizable, and lightweight package that allows you to add beautiful and customizable box-shadow effects to your HTML elements. It's easy to use and can be installed via the Node Package Manager (NPM).\n\n# Installation\nWe can using:\n• NPM\n• CDN\n\u003e To install Shadowizard using NPM, open your terminal and run the following command:\n ```\nnpm install @developerso/shadowizard\n```\n\u003e To use using cdn:\n\nFor development version:\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/developerso/shadowizard@2.5.4/shadowizard/packages/cdn/dist/js/shadowizard.js\" integrity=\"sha256-Hjwjah7dAfJtwF6EkpNZdLSc4rtR/ZKv9xf6RbSD1do=\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\nFor production version:\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/developerso/shadowizard@2.5.4/shadowizard/packages/cdn/dist/js/shadowizard.min.js\" integrity=\"sha256-Hjwjah7dAfJtwF6EkpNZdLSc4rtR/ZKv9xf6RbSD1do=\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n# Usage\n\u003e Using NPM\n1. Import the Shadowizard package into your JavaScript file.\n```\nimport shadowizard from '@developerso/shadowizard';\n```\n2. Call the shadowizard function and pass in the target HTML element and any customization options you want to use.\n```\nshadowizard({\n    shadow_type: 'soft',\n    padding: false\n});\n```\n\n\u003e Using CDN\n\nAdd Following script in body tag.\n\nREMEMBER to add the cdn. [See the documentation](https://github.com/developerso/shadowizard/wiki#installation)\n```\n\u003cscript\u003e\nshadowizard({\n    shadow_type: 'soft',\n    padding: false\n});\n\u003c/script\u003e\n```\n# Options\n\n`Shadowizard` provides you with several options that you can use to customize the box-shadow effect:\n\n• `shadow_type` `(string)`: This option determines the type of shadow effect you want to use. You can choose from two types: hard and soft. The default is hard.\n\n• `padding` `(boolean)`: This option determines whether or not to include padding in the shadow effect. If set to true, the shadow will be applied to the padding as well as the content of the HTML element. If set to false, the shadow will only be applied to the content. The default is false.\n\n• `shadow_color` `(string)`: This option determines the color of the shadow effect. You can use any valid CSS color value. The default is rgba(0,0,0,0.2).\n\n• `shadow_distance` `(string)`: This option determines the distance between the HTML element and the shadow. You can use any valid CSS length value. The default is 10px.\n\n▪︎ `shadow_blur` `(string)`: This option determines the blur radius of the shadow. You can use any valid CSS length value. The default is 10px.\n\n# Example\n\n```\n// Example 1 - Using the default options\nshadowizard();\n\n// Example 2 - Applying a soft shadow effect\nshadowizard({\n    shadow_type: 'soft'\n});\n\n// Example 3 - Applying a blue shadow effect\nshadowizard({\n    shadow_color: 'blue'\n});\n\n// Example 4 - Applying a shadow effect with padding\nshadowizard({\n    padding: true\n});\n\n// Example 5 - Applying a shadow effect with a distance of 20px and a blur radius of 15px\nshadowizard({\n    shadow_distance: '20px',\n    shadow_blur: '15px'\n});\n```\n\n# Conclusion \n\nShadowizard is a simple and customizable package that makes it easy to add beautiful box-shadow effects to your HTML elements. With its easy-to-use API and customizable options, you can quickly and easily create stunning visual effects that enhance the design of your website or application.\n\n\n# Tags\n\n![](https://img.shields.io/github/downloads/developerso/shadowizard/total?color=green)\n![](https://img.shields.io/npm/v/@developerso/shadowizard)\n![](https://img.shields.io/jsdelivr/gh/hm/developerso/shadowizard)\n![](https://img.shields.io/github/license/developerso/shadowizard)\n![](https://img.shields.io/npm/l/@developerso/shadowizard?label=NPM%20license)\n![](https://img.shields.io/badge/Github%20Latest%20version-2.5.3-green)\n","funding_links":["https://github.com/sponsors/npmnishantsharma","https://patreon.com/Developerso"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishantapps%2Fshadowizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnishantapps%2Fshadowizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishantapps%2Fshadowizard/lists"}