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
Build linear or radial gradients with two to eight editable color stops, a live preview and copyable CSS.
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.
Related tools
Color contrast checker
Check WCAG 2.2 text contrast with a live preview and separate AA and AAA results for normal and large text.
CSS box shadow generator
Adjust offset, blur, spread, color and opacity with a live preview, then copy a box-shadow declaration for an outer or inset shadow.
Aspect ratio calculator
Simplify an image or video aspect ratio and calculate the matching width or height for a target size, with a visual preview.
Comments
0