Configure Webhooks
Real-time notifications for every gradient event — from team saves to palette updates.
Connect Your Endpoint
ChromaKit sends HTTP POST requests to your server the moment a gradient event occurs. Add your webhook URL below and select which events trigger a notification.
Each webhook request includes a Content-Type: application/json header and a X-ChromaKit-Signature header for payload verification. Your endpoint must respond with a 200 OK within 5 seconds, or ChromaKit will retry up to three times with exponential backoff (2s, 4s, 8s).
Common integrations include Slack channels for team alerts, GitHub Actions for automated design-system syncs, and internal CI pipelines that regenerate CSS custom properties whenever a shared gradient is updated.
gradient.created
Fired when a user saves a new gradient to a team project. Example: Sarah Lin creates #FF6B6B → #4ECDC4 in the Q4 Brand Refresh workspace. Your endpoint receives the gradient ID, color stops, author, and project slug in the payload.
gradient.updated
Triggered when an existing gradient's color stops, direction, or easing curve are modified. The payload includes both the previous and current values so you can diff changes. Useful for audit logs or invalidating cached asset bundles.
gradient.deleted
Sent when a gradient is permanently removed from a team project. The payload contains the gradient ID, the deleting user's email, and a timestamp. Helps you keep external design registries in sync.
palette.exported
Fires when a user exports a palette as CSS, JSON, or Figma tokens. The payload includes the export format, file size in bytes, and a download token. Pair this with a storage webhook to archive every export in your S3 bucket.
After configuring your endpoint, use the Test Delivery button to send a sample payload immediately. Check the delivery log for status codes, response times, and retry history.
Add Webhook Endpoint View Delivery LogWhat Your Endpoint Receives
Every webhook payload follows the same envelope structure. The event field identifies the trigger, while data holds the event-specific details.
Below is a real payload from a gradient.created event in the Meridian UI Kit project:
Sample Payload — gradient.created
Event: gradient.created
Webhook ID: wh_8f3k2m9p
Timestamp: 2025-01-14T09:23:17Z
Project: meridian-ui-kit
Author: tom.herrero@chromakit.io
Gradient ID: grd_A7x9Kp2m
Name: Sunset Drift
Direction: 135deg
Color Stops: #FF6B6B at 0%, #Feca57 at 45%, #4ECDC4 at 100%
Easing: ease-in-out
Tags: brand, hero, v2.1
For gradient.updated events, the payload adds a previous object alongside current, so you can pinpoint exactly which stop shifted. In the Aurora Dashboard project, Lena Kowalski recently changed the midpoint from #A855F7 to #7C3AED — your webhook would show both values in a single request.
Signature verification uses HMAC-SHA256. The secret key is displayed once when you first create the webhook. Store it in your environment variables and compare the computed digest against the X-ChromaKit-Signature header to reject unauthorized requests.