Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
CSS gradient generator
Build linear or radial gradients with two to eight editable color stops, a live preview and copyable CSS.
About this tool
Control where a page background changes color using stop positions. Preview and export share the same values; the downloaded result is a CSS declaration.
How to use
Choose a gradient type, adjust the colors and their percentage positions, and set the angle for a linear gradient. Add or remove stops to see changes immediately, then copy the background declaration.
Stops are sorted by position. Two stops at the same position create a hard edge. Supports 2–8 stops from 0–100%, with linear angles from -360° to 360°. Radial gradients use a centered ellipse.
Common questions
How do I make a sharp boundary between two colors?
Place two different color stops at the same percentage. Stops are sorted by position. This creates CSS gradients; it does not download a rendered gradient image.
How do I choose a direction for the gradient?
Linear angles use CSS conventions: 0° points up and 90° points right. Radial mode uses a centered ellipse and has no angle control. Copy the complete background declaration into your CSS rule.
Related tools
Opens in a new tab
Comments
0