CSS and color tools
CSS and color tools convert colors between HEX, RGB, and HSL, check WCAG contrast, convert CSS units, and generate CSS for shadows, gradients, border radius, and similar properties with a live preview.
39 toolsfreeno upload
Start here
Color ConverterConvert a color between HEX, RGB, and HSL notation, including alpha values, by entering any CSS color code and copying the others.CSS Gradient GeneratorGenerate a CSS linear or radial gradient from two colors and an angle with a live preview, then copy the background declaration.Box Shadow GeneratorGenerate a CSS box-shadow by adjusting offset, blur, spread, color, and opacity sliders with a live preview, then copy the declaration.Color Contrast CheckerCheck the contrast ratio between a text color and a background color against WCAG 2.1 AA and AAA thresholds, with a live preview.CSS Grid GeneratorBuild a CSS grid layout by setting columns, rows, track size, and gap with a live preview, then copy the grid-template declarations.PX to REMConvert pixels to rem units by dividing by the root font size (16px by default), with em, pt, percent, and vw shown alongside.
All 39 css and color tools, A to Z
- Aspect Ratio CalculatorCalculate the aspect ratio from a width and height, then find the matching height for a new width so the image keeps its proportions.
- Border Radius GeneratorGenerate a CSS border-radius by setting each of the four corners in pixels with a live preview, then copy the finished declaration.
- Box Shadow GeneratorGenerate a CSS box-shadow by adjusting offset, blur, spread, color, and opacity sliders with a live preview, then copy the declaration.
- Change Color SaturationIncrease or decrease the saturation of a color by a chosen percentage in HSL, and get the adjusted color as HEX, RGB, and HSL.
- Color Contrast CheckerCheck the contrast ratio between a text color and a background color against WCAG 2.1 AA and AAA thresholds, with a live preview.
- Color ConverterConvert a color between HEX, RGB, and HSL notation, including alpha values, by entering any CSS color code and copying the others.
- Color MixerMix two colors in any ratio from 0 to 100 percent and get the blended color as HEX, RGB, and HSL codes, calculated channel by channel.
- Color PickerPick a color with the color picker built into your browser and copy its code in HEX, RGB, or HSL for use in CSS or a design tool.
- Color Shades GeneratorGenerate 3 to 15 shades of one base color from light to dark, keeping its hue and saturation, with a HEX code and swatch for each step.
- CSS Animation GeneratorGenerate a CSS keyframe animation such as fade, slide, zoom, bounce, pulse, shake, or spin with duration, delay, and easing options.
- CSS Background Pattern GeneratorGenerate a repeating CSS background pattern (stripes, dots, grid lines, checkerboard, or diagonal lines) from two colors and a size.
- CSS Checkbox GeneratorGenerate CSS for a custom styled checkbox with your own size, corner radius, and colors that still uses a real, accessible input element.
- CSS Clip Path GeneratorPick a shape such as a triangle, hexagon, star, arrow, or circle and get the matching CSS clip-path value with a live preview.
- CSS Cubic Bezier GeneratorSet the two control points of a cubic-bezier() easing curve, see the curve drawn, and copy the CSS transition-timing-function.
- CSS Gradient GeneratorGenerate a CSS linear or radial gradient from two colors and an angle with a live preview, then copy the background declaration.
- CSS Grid GeneratorBuild a CSS grid layout by setting columns, rows, track size, and gap with a live preview, then copy the grid-template declarations.
- CSS Loader GeneratorGenerate a pure CSS loading indicator (ring spinner, bouncing dots, bars, or pulse) with your size, color, and speed, and copy the code.
- CSS Switch GeneratorGenerate CSS for a toggle switch built on a real checkbox input, with your own width, on and off colors, and animation speed.
- CSS Text Glitch Effect GeneratorGenerate a CSS glitch text effect with two offset color layers and an adjustable speed, previewed on your own text, then copy the code.
- CSS Text ShadowGenerate a CSS text-shadow by adjusting horizontal offset, vertical offset, blur, and color with a live preview on sample text.
- CSS Triangle GeneratorGenerate a pure CSS triangle pointing up, down, left, or right with the border technique, by setting its width, height, and color.
- Darken ColorDarken a color by a chosen percentage by lowering its HSL lightness, and get the darker shade as HEX, RGB, and HSL codes.
- EM to PXConvert em units to pixels by multiplying by the font size of the element (16px by default), with rem, pt, and vw results as well.
- Flexbox PlaygroundTry CSS flexbox properties such as flex-direction, justify-content, align-items, flex-wrap, and gap on sample items and copy the CSS.
- Glassmorphism GeneratorGenerate CSS for a frosted glass (glassmorphism) effect by setting blur, background opacity, tint color, and corner radius with a preview.
- Greyscale/Desaturate a ColorConvert a color to greyscale by setting its HSL saturation to zero, and get the resulting grey as HEX, RGB, and HSL codes.
- HEX to RGBA ConverterConvert an 8-digit or 4-digit HEX color with transparency to an rgba() value, with the alpha channel shown as a number from 0 to 1.
- Invert a ColorInvert a color by subtracting each RGB channel from 255, and get the opposite color as HEX, RGB, and HSL codes ready to copy.
- Lighten ColorLighten a color by a chosen percentage by raising its HSL lightness, and get the lighter shade as HEX, RGB, and HSL codes.
- Neumorphism GeneratorGenerate CSS for a neumorphism (soft UI) effect from a base color, shadow distance, blur, and radius, with a live preview of the shape.
- Percent to PXConvert a percentage font size to pixels using the base font size (16px by default), so 150 percent becomes 24px, with rem and em.
- PT to PXConvert points to CSS pixels at the standard ratio of 96 pixels to 72 points, so 12pt equals 16px, with rem and em values included.
- PX to REMConvert pixels to rem units by dividing by the root font size (16px by default), with em, pt, percent, and vw shown alongside.
- Random Color GeneratorGenerate 1 to 12 random colors with their HEX, RGB, and HSL codes and a preview swatch for each, and reroll until a set suits you.
- React Native Shadow GeneratorGenerate React Native shadow styles for iOS (shadowColor, shadowOffset, shadowOpacity, shadowRadius) and the Android elevation value.
- REM to PXConvert rem units to pixels by multiplying by the root font size (16px by default), with em, pt, percent, and vw results as well.
- RGB to HEXConvert an RGB color such as rgb(5, 150, 105) to its six-digit HEX code, with the matching HSL value shown alongside the result.
- RGBA to HEX ConverterConvert an RGBA color with an alpha value to an eight-digit HEX code, where the last two digits carry the transparency.
- VW to PXConvert vw units to pixels for a viewport width you set (1440px by default), where 1vw equals one percent of the viewport width.