generate_linear_gradient
Create linear gradients with mathematical precision and CSS output by specifying colors, positions, angle, and interpolation methods for web design and UI development.
Instructions
Generate linear gradients with precise mathematical control and CSS output
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| colors | Yes | Array of color strings for the gradient | |
| positions | No | Stop positions (0-100). If not provided, colors are evenly distributed | |
| angle | No | Gradient angle in degrees (0-360, default: 90) | |
| interpolation | No | Interpolation method for color transitions | linear |
| color_space | No | Color space for interpolation | rgb |
| steps | No | Number of steps for stepped gradients (creates discrete color bands) |
Implementation Reference
- The core handler function `generateLinearGradient` that validates inputs, processes colors and positions, applies interpolation, generates CSS, and creates the tool response.async function generateLinearGradient( params: LinearGradientParams ): Promise<ToolResponse | ErrorResponse> { const startTime = Date.now(); try { // Validate parameters const { error, value } = linearGradientSchema.validate(params); if (error) { return createErrorResponse( 'generate_linear_gradient', 'INVALID_PARAMETERS', `Invalid parameters: ${error.details.map(d => d.message).join(', ')}`, startTime, { details: error.details, suggestions: [ 'Ensure colors array has 2-20 valid color strings', 'Check that positions (if provided) match color count and are in ascending order', 'Verify angle is between 0-360 degrees', 'Use supported interpolation methods: linear, ease, ease_in, ease_out, bezier', ], } ); } const validatedParams = value as LinearGradientParams; // Validate colors const validatedColors = validateColors(validatedParams.colors); // Calculate positions const positions = calculatePositions( validatedColors.length, validatedParams.positions ); // Apply interpolation const interpolatedPositions = applyInterpolation( positions, validatedParams.interpolation || 'linear' ); // Generate CSS const angle = validatedParams.angle !== undefined ? validatedParams.angle : 90; const css = generateLinearGradientCSS( validatedColors, interpolatedPositions, angle, validatedParams.steps ); // Prepare response data const colorData = validatedColors.map((colorObj, index) => ({ color: colorObj.original, position: interpolatedPositions[index] || 0, hex: colorObj.color.toHex(), rgb: colorObj.color.toRgbString(), hsl: colorObj.color.toHslString(), })); const data: LinearGradientData = { css, type: 'linear', angle, colors: colorData, interpolation: validatedParams.interpolation || 'linear', color_space: validatedParams.color_space || 'rgb', total_stops: validatedParams.steps || validatedColors.length, }; const executionTime = Date.now() - startTime; // Generate recommendations const recommendations: string[] = []; if (validatedColors.length > 5) { recommendations.push( 'Consider using fewer colors for better performance' ); } if (angle % 45 !== 0) { recommendations.push( 'Consider using multiples of 45° for common gradient angles' ); } if (validatedParams.steps && validatedParams.steps > 20) { recommendations.push( 'High step counts may impact performance on older devices' ); } return createSuccessResponse( 'generate_linear_gradient', data, executionTime, { colorSpaceUsed: validatedParams.color_space || 'rgb', accessibilityNotes: [ 'Ensure sufficient contrast between gradient colors and any overlaid text', 'Test gradient visibility with color vision deficiency simulators', ], recommendations, exportFormats: { css: css, scss: `$gradient: ${css};`, json: { type: 'linear', angle: validatedParams.angle || 90, colors: colorData, css: css, }, }, } ); } catch (error) { logger.error('Error generating linear gradient', { error: error as Error }); const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'; return createErrorResponse( 'generate_linear_gradient', 'GRADIENT_GENERATION_ERROR', errorMessage, startTime, { details: { error: errorMessage }, suggestions: [ 'Check that all colors are in valid formats (hex, rgb, hsl, named)', 'Ensure positions array matches color count if provided', 'Verify all parameters are within valid ranges', ], } ); } }
- JSON Schema definition for the tool parameters, defining types, constraints, and descriptions for inputs like colors, positions, angle, etc.parameters: { type: 'object', properties: { colors: { type: 'array', items: { type: 'string' }, minItems: 2, maxItems: 20, description: 'Array of color strings for the gradient', }, positions: { type: 'array', items: { type: 'number', minimum: 0, maximum: 100 }, description: 'Stop positions (0-100). If not provided, colors are evenly distributed', }, angle: { type: 'number', minimum: 0, maximum: 360, default: 90, description: 'Gradient angle in degrees (0-360, default: 90)', }, interpolation: { type: 'string', enum: ['linear', 'ease', 'ease_in', 'ease_out', 'bezier'], default: 'linear', description: 'Interpolation method for color transitions', }, color_space: { type: 'string', enum: ['rgb', 'hsl', 'lab', 'lch'], default: 'rgb', description: 'Color space for interpolation', }, steps: { type: 'number', minimum: 2, maximum: 100, description: 'Number of steps for stepped gradients (creates discrete color bands)', }, }, required: ['colors'], },
- src/tools/index.ts:115-115 (registration)Registration of the `generateLinearGradientTool` into the central `toolRegistry`.toolRegistry.registerTool(generateLinearGradientTool);
- Helper function `generateLinearGradientCSS` that constructs the final CSS linear-gradient string from processed colors and positions.function generateLinearGradientCSS( colors: Array<{ color: Colord; original: string }>, positions: number[], angle: number, steps?: number ): string { let cssStops: string[]; if (steps) { // Generate stepped gradient const steppedColors = generateSteppedPositions( colors.map(c => c.color.toHex()), steps ); cssStops = steppedColors.map( ({ color, position }) => `${color} ${position}%` ); } else { // Generate smooth gradient cssStops = colors.map((colorObj, index) => { const color = colorObj.color.toHex(); const position = positions[index]; return `${color} ${position}%`; }); } return `linear-gradient(${angle}deg, ${cssStops.join(', ')})`; }
- Joi runtime validation schema mirroring the tool's JSON schema for additional server-side validation.const linearGradientSchema = Joi.object({ colors: Joi.array() .items(Joi.string()) .min(2) .max(20) .required() .description('Array of color strings for the gradient'), positions: Joi.array() .items(Joi.number().min(0).max(100)) .optional() .description( 'Stop positions (0-100). If not provided, colors are evenly distributed' ), angle: Joi.number() .min(0) .max(360) .optional() .description('Gradient angle in degrees (0-360, default: 90)'), interpolation: Joi.string() .valid('linear', 'ease', 'ease_in', 'ease_out', 'bezier') .default('linear') .description('Interpolation method for color transitions'), color_space: Joi.string() .valid('rgb', 'hsl', 'lab', 'lch') .default('rgb') .description('Color space for interpolation'), steps: Joi.number() .integer() .min(2) .max(100) .optional() .description( 'Number of steps for stepped gradients (creates discrete color bands)' ), });