Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
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.
Preview
About this tool
Adjust offset, blur, spread, color and opacity with a live preview, then copy a box-shadow declaration for an outer or inset shadow.
How to use
Set horizontal and vertical offsets, blur radius, spread, color and opacity. Enable inset for an inner shadow. The preview updates immediately, and the CSS can be copied or downloaded.
Offsets and spread may be negative; blur may not. Dimensions range from -200 to 200px, with blur from 0 to 200px. This tool generates one shadow layer with opacity from 0 to 100%.
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 gradient generator
Build linear or radial gradients with two to eight editable color stops, a live preview and copyable CSS.
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