Design & CSS Tools
Pick colors, convert color codes, check text contrast and generate CSS for gradients, shadows, rounded corners and animations. Each generator shows a live preview and gives you code you can paste straight into your stylesheet, which saves time when building or polishing a web page.
Color Picker
Pick a color visually and get its HEX, RGB, HSL and CMYK codes.
RGBA to HEX
Convert RGBA colors with transparency into 8-digit HEX codes.
RGB to HSL
Convert RGB colors to hue, saturation and lightness, step by step.
HSL to RGB
Convert hue, saturation and lightness values into RGB and HEX codes.
Color Palette Generator
Create matching color schemes from one base color using color theory.
Color Contrast Checker
Test whether text and background colors are readable and meet WCAG rules.
CSS Gradient Generator
Design linear and radial CSS gradients with a live preview.
CSS Box Shadow Generator
Build CSS box-shadow effects visually and copy the code.
CSS Border Radius Generator
Set rounded corners for each side of a box and copy the CSS.
CSS Animation Generator
Create ready-made CSS keyframe animations and copy the code.
CSS Cursor Viewer
Preview every CSS cursor style by hovering, and copy the code.
Z-Index Tester
Experiment with overlapping boxes to see how CSS z-index works.
CSS Unit Converter
Convert between px, rem, em, pt, %, vw and vh for CSS.
Aspect Ratio Calculator
Find the ratio of any size or work out a missing width or height.