Working example + reusable specification
CSS Gradient Builder AI Prompt
Build a visual two-stop gradient generator with sorted color stops, precise controls, exact CSS output, useful presets, and validated shareable URL state.
01 / What it builds
A complete interaction, not a loose concept
Copy a detailed AI coding prompt for a responsive CSS gradient builder with linear and radial controls, presets, shareable settings, and tests.
- Linear and radial gradient modes
- Two colors with adjustable sorted stops
- Stable live preview and exact CSS output
- Presets and validated shareable URL state
02 / Complete prompt
Copy the build specification
Project: CSS Gradient Builder Objective Build a browser-only two-stop CSS gradient generator with precise controls, presets, a live preview, copyable CSS, and shareable URL state. Functional Requirements - Support linear and radial gradients with two hexadecimal color stops and independently adjustable positions. - Provide a 0–360 degree angle control for linear gradients and disable it for radial gradients. - Sort crossed stop positions into valid visual order and show every range value beside its control. - Update a stable preview and complete background-image declaration on every adjustment. - Include three distinct presets, reset, copy, and validated URL restoration. Technical Requirements - Use semantic HTML, responsive CSS, and vanilla JavaScript native modules. - Keep normalization, clamping, stop sorting, URL parsing, and CSS serialization independent from DOM and history effects. - Accept only six-digit hexadecimal colors, clamp positions to 0–100 and angles to 0–360, and safely restore defaults for malformed parameters. - Store no gradient history locally and send no generated CSS or settings through analytics. Accessibility and Responsive Behavior - Associate every control with a visible label and every slider with a programmatic output. - Keep all commands keyboard operable with visible focus, 44px targets, and no horizontal overflow at 320px. - Preserve stable preview dimensions and stack controls on narrow screens. Acceptance Criteria - Linear and radial declarations serialize exactly from normalized settings. - Crossed stops are sorted, shared URLs restore valid state, and malformed values fall back safely. - Presets and reset update controls, preview, CSS, and URL together. - Automated tests cover normalization, serialization, URL restoration, controls, presets, reset, and mobile layout. Deliverables - The complete builder as the primary experience, pure gradient-domain logic, a browser controller, and focused tests. - No backend, account, runtime dependency, or local persistence. Provided by www.my-ai-prompts.com