Shadow Styler is a tool for creating and customising blob shadows with ease. Whether you're a seasoned designer, a budding developer, or just someone who loves tinkering with shapes and colours, this tool should have you covered. It's simple and intuitive so say you can goodbye to tedious manual tweaks.
Why did I build this? Honestly, I was tired of wrestling with shadow properties every time I wanted something that looked... good. Shadows can be tricky. So, I thought, why not create a tool that makes it painless? And here we are—a project born out of frustration, turned into a time-saving experience for everyone.
- HTML/CSS: The bread and butter for structure and styling.
- JavaScript: interactivity.
Here’s what you can play around with:
- Shape Dimensions: Adjust the width and height to create your perfect blob.
- Shadow Offsets: Move the shadow around with X and Y controls.
- Border Radius: Play with each corner’s radius for quirky shapes.
- Colour Pickers: Customise colours for both the blob and its shadow.
- Outline Toggles: Add or remove outlines to suit your aesthetic.
- Multiplier: Export with multipliers for scaling the blob.
- Export Options: Grab the CSS or HTML instantly, and even export with multipliers for scaling.
Getting started is ridiculously easy (I stuck to vanilla JS and CSS for a reason).
- Clone the Repository:
git clone https://github.com/your-repo-url
- Navigate to the Project Directory:
cd blob-shadow-generator - Open
main.htmlin Your Browser: Just double-click the file or open it through your browser.
Prefer a live demo? Click here to check it out!
For any questions, suggestions, or feedback, feel free to reach out via email:
Contact Email: [email protected]
This project is licensed under the MIT License. For more details, refer to the LICENSE file in the repository.