The main gradient control allows you to:
- Adjust the gradient stop position by dragging the stop marker
- Adjust the stop color by double clicking on the stop marker
- Delete a stop by draggin the stop marker up or down
- Add a new stop by clicking anywhere in between the existing stop markers
You can use the ‘Stops’ panel to conrol the color and the position of the currently selected stop more precisely.
The ‘Preview’ panel allows previewing the current gradient as a vertical or horizontal one, and also allows quickly previewing how the Internet Explorer fallback gradient will look in IE.
Finally, the ‘CSS’ panel always has the CSS for the current gradient for easy copying and pasting into your stylesheet. You can also use this panel to import an existing gradient CSS into the tool.
3. Code Pen
CSS Button Generator will create beautiful css buttons for you to use on your web pages without the need for any images. When you have styled your button to your liking, simply click on the generated button to get your css style code. Share our site using a button below!