webdev_css_gradient_generator
Generate a CSS gradient declaration from an ordered list of color stops. Choose linear, radial, or conic type, set direction or angle, and get ready-to-paste CSS plus usage snippets.
Instructions
CSS Gradient Generator. Build a ready-to-paste CSS gradient from an ordered list of color stops and return the full background declaration plus copy-ready usage snippets. Supports three gradient functions selected by type: linear (with a named direction like 'to right' or a custom angle), radial (circle or ellipse shape), and conic (swept from a starting angle); set repeating to emit the repeating-* variant. Use webdev_css_filter_generator instead for blur/brightness/contrast filter effects, and webdev_color_palette or webdev_hex_color to pick the colors before composing them here. Runs locally on the input you provide: read-only, non-destructive, contacts no external service, and is rate-limited. Returns the CSS declaration string, an HTML preview snippet, the echoed gradient settings, and CSS/inline/SCSS/Tailwind usage examples.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| type | No | Gradient function to generate. | linear |
| direction | No | For linear, a named/keyword direction such as 'to right' or 'to bottom left'; pass 'custom' (or a value ending in deg) to drive the gradient by the angle field instead. For radial, 'circle' selects a circular shape and any other value yields an ellipse. Ignored for conic. | to right |
| angle | No | Angle in degrees. Used as the linear-gradient angle when direction is custom, and as the conic-gradient starting angle (from Ndeg). Ignored otherwise. | |
| colors | Yes | Ordered color stops; at least one is required (empty returns HTTP 400). | |
| repeating | No | When true, emit the repeating-* gradient variant (repeating-linear/radial/conic-gradient). |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
| css | No | Full CSS declaration, e.g. background: linear-gradient(to right, #22d3ee 0%, #a3e635 100%); | |
| previewHtml | No | A self-contained div HTML snippet with the gradient applied inline, for live preview. | |
| usageExamples | No | Copy-ready snippets keyed by format (css, inline, sass, tailwind), each with a title and code. | |
| type | No | Echoed gradient type (linear, radial, or conic). | |
| direction | No | Echoed direction/shape value. | |
| angle | No | Echoed angle in degrees. | |
| colors | No | Echoed color stops, each an object with color and optional position. | |
| repeating | No | Echoed repeating flag. |