How to use
- Choose the Gradient or Button tab.
- Adjust the controls and watch the live preview: colors, angle and type for a gradient; text, colors, padding and corner radius for a button.
- Click the copy icon above the code block and paste the CSS into your stylesheet.
The Gradient tab builds a background from two colors. You can choose between a linear and a radial gradient. For linear gradients there is an angle slider from 0 to 360 degrees. The radial option produces a circular gradient from the first color to the second. The code below the preview is a single background declaration, for example a linear-gradient with an angle and two color stops, ready to paste.
The Button tab outputs a complete rule for a class named custom-button. You set the label text for the preview, the background color, the text color, horizontal and vertical padding (0 to 100 px each) and the corner radius (0 to 50 px). The generated CSS includes the colors, padding and radius you chose, plus no border, a pointer cursor, medium font weight, a short opacity transition, and a hover rule that lowers the opacity slightly.
Colors can be picked with the color control or typed as text. The output is plain CSS with no vendor prefixes and no framework, so you can use it in any project and edit it further. Gradients with more than two color stops are not supported by this tool.
Nothing is sent to a server. The preview and the code are generated in your browser as you type.
FAQ
Can I make a gradient with three or more colors?
No. This tool uses two colors. You can add more stops by editing the copied CSS.
What does the angle control do?
For linear gradients it sets the direction in degrees. It is hidden for radial gradients, which are always circular.
What is the class name in the button CSS?
The generated rule uses the class custom-button, which you can rename to match your project.
Does it add a hover style to the button?
Yes. The copied CSS includes a hover rule that sets the opacity to 0.9.
Is any of my input uploaded?
No. The CSS is built in your browser.