mazipan / mazipan/html-tools

feat: add CSS Box Shadow Generator tool

Open
#125 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
HTML
Stars
5
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Summary

Add a box-shadow.html visual builder for the CSS box-shadow property — slider controls, multi-layer support, live card preview, and copy-ready CSS output.

Motivation

CSS box-shadow builders are consistently popular among front-end developers who want to iterate visually rather than guess numeric values. It extends the existing design-tool cluster (Gradients, Blob, Waves) into practical CSS generation and requires zero external dependencies.

Proposed UX

  • Live preview card: a resizable box in the center showing the shadow in real time against light and dark backgrounds (toggle)
  • Per-layer controls (panel on the side):
    • X offset, Y offset, Blur radius, Spread radius — numeric inputs + range sliders
    • Color swatch (.color-btn) with opacity slider
    • inset toggle
    • Duplicate / delete layer buttons
  • Layer list: add up to 8 shadow layers; drag to reorder; active layer highlighted
  • Output panel:
    • Generated box-shadow: … CSS (multi-layer comma-joined)
    • Tailwind v3/v4 shadow-[…] arbitrary-value string
    • One-click copy for both
  • Preset gallery: 6–8 named shadow recipes (e.g. Soft, Elevated, Crisp, Inset, Neon glow) that load a layer config

Implementation notes

  • Category: Ornaments
  • Slug: box-shadow
  • Icon: 🌑
  • No npm dependencies — all CSS value assembly is inline string interpolation
  • All logic inline in <script>
  • Use .angle-dial from the design system for the optional light-direction knob if added
  • Follow src/_tool-template.html and run bun run generate:sections, bun run generate:index, bun run generate:favicon after adding to tools.json

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/_tool-template.html and inspect the existing design-tool cluster for the expected structure and interactions. Add the tool entry to tools.json, then run bun run generate:sections, bun run generate:index, and bun run generate:favicon. Done means the builder supports the listed layer controls, previews and presets, produces copyable CSS and Tailwind output, and has the requested live interactions.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
frontend, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.