NotesChangelogAPIAbout

Gradients

You can do some amazing things with css gradients. Unfortunately gradients can be a time consuming material to try and manipulate even for the most experienced engineers and designers. With our newest gradient component, we've set out to make gradients a more malleable material on the web - as well as make them easier to use with your existing visual brand if you have one.

Check it out here

What's new

Stacks / Layers

Gradient 'stacks' can be thought of like layers in a traditional design tool.

"Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects." MDN - CSS Gradients

You can now create as many stacks as the browser will allow. Paint away.

Customize and constrain to theme

By default color selection is purely random. If you have an existing brand, or are in the process of developing one, we want you to easily work with your own materials. This is our first component that connects to our global theme editor. Constrain output to values from your theme - while still allowing for overrides.

Right now our theme editor only supports defining a color palette but will be expanded to support more properties soon.

Save to image

Generate an image distributed behind a CDN with the click of a button. Powered by our new JSX to PNG API.

New output formats

We've expanded our code exports to include

  • CSS
  • Theme UI
  • JSX
  • JavaScript
  • JSON

We'll be looking to expand this list for all components over time.

Roadmap

In no particular order

  • Conic gradients
  • Repeating gradients for linear, radial, and conic
  • Multiple color stops per stack
  • Additional export formats
  • Expanded theme control
  • Color vision deficiency previews
  • Image download for common device sizes
  • Share gradient designs for collaborative editing
  • Drag and drop
  • Animated gradients

We can't wait to see what you make.

Send us your favorites on Twitter: @components_ai

New
DelanuayVoronoiColor ScalesGradientsText ShadowsBox Shadows
ChangelogNotesAPI
© Copyright 2018-2020hello@components.ai@components_aiTermsPrivacy© Copyright 2018-2020