CSS Gradient / Box Shadow Generator
Colors: exactly #RRGGBB, no alpha. Numbers: optional minus, ASCII digits and optional dot with 1–2 decimal places; no spaces, plus, exponent or trimming. At most 32 UTF-16 characters per number.
Precise entries are single-line values; browsers remove line breaks before validation. Pickers show a bounded fallback for invalid or empty tokens; only using a picker replaces that token. Generate validates every token before preview or Copy.
Angle: 0–360°. Positions: 0–100%, nondecreasing. Stops: 2 of 8.
Reset restores usable defaults, two stops and no inset, retaining the selected mode. Presets replace working fields; Generate applies the selected values.
Scope, limits and privacy
Only linear gradients with 2–8 stops and single box shadows are supported. No radial, conic or repeating gradients, multiple layers, raw CSS import, selectors, URLs or remote preview assets. Colors normalize to uppercase; output uses invariant decimals, deterministic spacing and at most 4,096 UTF-16 characters. The preview uses only the validated serializer value on the fixed background or box-shadow property; Copy uses the same result.
Text entry native limits are 34 characters for numbers and 9 for colors. Large pastes may clip before transport but are refused, never accepted as a prefix. Oversized edits clear the affected field, preview, output and Copy; re-enter that field, Reset defaults or Clear. Refusal remains latched across option/mode changes. Native single-line entries remove line breaks and pickers normalize input before validation. Ordinary native input bounds do not certify hostile programmatic assignments or every IME. Clear resets stop content to two empty stops and all numeric/color fields to empty; mode and inset are retained.
No payload persistence or logging is added. Interactive Auto server events traverse the Blazor connection; WebAssembly executes on-device. Copy explicitly writes the declaration to your clipboard. Website discovery is active; extension and Android remain inactive metadata, not hard route denial.
CSS Gradient / Box Shadow Generator guide
Generate a linear gradient or a single box shadow with a local preview.
Input and limitations
Opaque #RRGGBB colors and invariant decimal numbers (up to two decimal places). No raw CSS import.
Check the selected options before using the result. Formatting and conversion do not establish that data is safe or suitable for your application.
How to use CSS Gradient / Box Shadow Generator
- Choose a mode, edit its fields, then Generate. Choose Copy to copy the CSS declaration.
- Gradient stops stay in input order; equal positions create hard stops. Only one shadow layer is supported.
- Clear removes all fields, stops, results and errors; mode and inset preference stay selected. The preview returns to a neutral empty state.
Example
Generate the default 90-degree red-to-blue gradient. Set both stop positions to 50 for a hard stop, or choose Box shadow and Inset shadow. Copy copies the literal CSS; editing removes the old preview until Generate.
Privacy on the website
The website uses Blazor Auto: interactive processing can run on the server or in your browser, depending on the current session. Do not assume pasted input stays on your device. Use non-sensitive sample data, and never place passwords, tokens or personal data in page URLs.
Search indexing covers public tool descriptions, not your input or generated output. See the privacy policy for website analytics and other data handling.
Install and offline help
Use your browser's install action, if available. Installation is optional; you can keep using this website normally.
Tools need an internet connection. Offline support provides a connection information page, not all-tools offline use.
Reset keeps favorites and preferences. It does not restore unsaved tool content.