generate_radial_gradient
Create radial gradients with mathematical precision for CSS styling, offering control over colors, shapes, sizes, and interpolation methods to enhance visual designs.
Instructions
Generate radial 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 | |
| center | No | Center point [x, y] as percentages (0-100, default: [50, 50]) | |
| shape | No | Gradient shape | circle |
| size | No | Gradient size method | farthest_corner |
| dimensions | No | [width, height] dimensions when size is explicit | |
| 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
- Core handler function that executes the tool logic: validates parameters using Joi, processes colors and positions, applies interpolation, generates CSS via helper, builds detailed response data with recommendations.
async function generateRadialGradient( params: RadialGradientParams ): Promise<ToolResponse | ErrorResponse> { const startTime = Date.now(); try { // Validate parameters const { error, value } = radialGradientSchema.validate(params); if (error) { return createErrorResponse( 'generate_radial_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 center coordinates are between 0-100', 'Use supported shape: circle or ellipse', 'Provide dimensions when size is explicit', ], } ); } const validatedParams = value as RadialGradientParams; // 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 css = generateRadialGradientCSS( validatedColors, interpolatedPositions, validatedParams.center || [50, 50], validatedParams.shape || 'circle', validatedParams.size || 'farthest_corner', validatedParams.dimensions, 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: RadialGradientData = { css, type: 'radial', center: validatedParams.center || [50, 50], shape: validatedParams.shape || 'circle', size: validatedParams.size || 'farthest_corner', 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 ( validatedParams.center && (validatedParams.center[0] !== 50 || validatedParams.center[1] !== 50) ) { recommendations.push( 'Off-center gradients can create interesting visual effects' ); } if (validatedParams.steps && validatedParams.steps > 20) { recommendations.push( 'High step counts may impact performance on older devices' ); } if ( validatedParams.shape === 'ellipse' && validatedParams.size === 'explicit' ) { recommendations.push( 'Elliptical gradients with explicit dimensions work well for specific aspect ratios' ); } return createSuccessResponse( 'generate_radial_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', 'Radial gradients can create focus points - use carefully for accessibility', ], recommendations, exportFormats: { css: css, scss: `$gradient: ${css};`, json: { type: 'radial', center: validatedParams.center || [50, 50], shape: validatedParams.shape || 'circle', size: validatedParams.size || 'farthest_corner', colors: colorData, css: css, }, }, } ); } catch (error) { logger.error('Error generating radial gradient', { error: error as Error }); const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'; return createErrorResponse( 'generate_radial_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', 'Provide dimensions when using explicit size', ], } ); } } - JSON Schema in ToolHandler defining the input parameters for the MCP 'generate_radial_gradient' tool, including types, constraints, defaults, and descriptions for all fields.
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', }, center: { type: 'array', items: { type: 'number', minimum: 0, maximum: 100 }, minItems: 2, maxItems: 2, default: [50, 50], description: 'Center point [x, y] as percentages (0-100, default: [50, 50])', }, shape: { type: 'string', enum: ['circle', 'ellipse'], default: 'circle', description: 'Gradient shape', }, size: { type: 'string', enum: [ 'closest_side', 'closest_corner', 'farthest_side', 'farthest_corner', 'explicit', ], default: 'farthest_corner', description: 'Gradient size method', }, dimensions: { type: 'array', items: { type: 'number', minimum: 1, maximum: 10000 }, minItems: 2, maxItems: 2, description: '[width, height] dimensions when size is explicit', }, 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:116-116 (registration)Registration of the generateRadialGradientTool with the central ToolRegistry singleton.
toolRegistry.registerTool(generateRadialGradientTool); - Key helper function that constructs the final CSS radial-gradient syntax from validated colors, positions, shape, size, etc.
function generateRadialGradientCSS( colors: Array<{ color: Colord; original: string }>, positions: number[], center: [number, number], shape: string, size: string, dimensions?: [number, 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}%`; }); } // Build gradient specification const sizeSpec = generateSizeSpec(size, shape, dimensions); const centerSpec = `${center[0]}% ${center[1]}%`; let gradientSpec = ''; if (shape === 'circle') { if (size === 'explicit') { gradientSpec = `circle ${sizeSpec} at ${centerSpec}`; } else { gradientSpec = `circle ${sizeSpec} at ${centerSpec}`; } } else { if (size === 'explicit') { gradientSpec = `ellipse ${sizeSpec} at ${centerSpec}`; } else { gradientSpec = `ellipse ${sizeSpec} at ${centerSpec}`; } } return `radial-gradient(${gradientSpec}, ${cssStops.join(', ')})`; } - Joi object schema used internally for runtime parameter validation in the handler.
const radialGradientSchema = 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' ), center: Joi.array() .items(Joi.number().min(0).max(100)) .length(2) .default([50, 50]) .description( 'Center point [x, y] as percentages (0-100, default: [50, 50])' ), shape: Joi.string() .valid('circle', 'ellipse') .default('circle') .description('Gradient shape'), size: Joi.string() .valid( 'closest_side', 'closest_corner', 'farthest_side', 'farthest_corner', 'explicit' ) .default('farthest_corner') .description('Gradient size method'), dimensions: Joi.array() .items(Joi.number().min(1).max(10000)) .length(2) .when('size', { is: 'explicit', then: Joi.required(), otherwise: Joi.optional(), }) .description('[width, height] dimensions when size is explicit'), 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)' ), });