Check out the site here!

I occasionally like to dabble with CSS art, using properties like border and background. However, since I'm still a novice, things like playgrounds where you can experiment in a different interface first are really helpful! While there are plenty of playgrounds out there, sometimes they don't always do exactly what you're looking for. So I decided to make my own site with some of my own playgrounds!

The first playground I made is for the CSS border-radius property. On the right, I made some input fields where you can specify the size of the element, the border width, and the values for both the horizontal and vertical radii. At the bottom, you can copy the code snippet containing the border-radius value that you input.

This playground is on the simplistic side since it's easy to get really complicated with linear gradients. While in "real life" you can add lots and lots of colors and stops, for brevity's sake I stuck with just 2 colors. I utilized the react-color library to take advantage of a Google Chrome-like color picker component to make it as easy as possible to pick a color.

In the future, I would like to add an option for the user to add more colors, if they'd like. I also added options to input the size of the element and the angle of the gradient. And just like with the border-radius playground, you can copy the code snippet containing the background value with the linear-gradient you created.

This site was a fun project with the input states impacting both the visual element and the code block below. While it wasn't too hard to implement all of that, it was fun to think about how I wanted to implement each playground. It would be really easy to get carried away and have lots of input fields, but I felt that would become overwhelming and deter from the usefulness of the tool.