You can do some amazing things with CSS gradients. Even for the most experienced engineers and designers, however, gradients can be a time consuming material to manipulate. With our newest gradient component, we've set out to make gradients a more malleable material on the web–as well as to make them easier to use with your existing visual brand. Check it out here.
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.
Currently, our theme editor only supports defining a color palette. We'll expand it to support more properties soon.
Powered by our new JSX to PNG API, generate an image distributed behind a CDN with the click of a button.
We've expanded our code exports to include
Over time, we'll expand the list for all components.
In no particular order:
We can't wait to see what you make.
Send us your favorites on Twitter: @components_ai