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.
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.
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.
Generate an image distributed behind a CDN with the click of a button. Powered by our new JSX to PNG API.
We've expanded our code exports to include
We'll be looking to expand this list for all components over time.
In no particular order
Send us your favorites on Twitter: @components_ai