This CSS Gradient Generator is intuitive to use. It includes two default colors as a default example so the user knows how it works, and a box with an add button so that users know they can add more colors. By hovering over the colors, an X appears so the user knows they can remove the color. Although, users can only add up to 5 colors. The user can also change the angle with the intuitive circle. These are examples of great learnability and discoverability. The color gradient is fixed to the screen as the user scrolls down, so the user does not need to keep scrolling back up to see the results. This is a good efficiency. Everything is editable so this is good for safety. To be better in safety, there should be a reset or undo button. It is difficult to back track since the movements are so precise.
This border-radius demo is simple and easy to use. For efficiency sake, it would be better to not make the user click on the toggle bar for Custom size in order to show the width and height of the box. It should just be directly visible. It is also a little confusing as to why there are 8 different percentages for 4 corners. I wish it was clearer what each percentage represents instead of having to trial and error all of them to see what each does. This would improve the learnability. For safety, it would be nice to have an undo button so that the user can go back to the previous setting. Additionally, for efficiency sake, it would be nice to have examples of more standardized ways of using border-radius because it is less likely the user will have a box with funky border radius dimensions.