Generate CSS effects
Build gradients, shadows, radii, shapes, patterns and glass-style panels visually.
10 focused tools
Free CSS & Color Tools
Design CSS effects visually, build usable color variations and copy production-ready values into your stylesheet. Every preview updates locally as you adjust the controls.
Previews and generated CSS or color values stay in your browser.
No sign-up required
All CSS & Colors tools
Choose a tool directly or filter the collection by task.
CSS Gradient Generator
Design linear, radial, and conic CSS gradients with a live preview
CSS Box Shadow Generator
Design single or layered box-shadows with a live preview and copyable CSS
CSS Border Radius Generator
Round each corner independently and copy the generated border-radius CSS
CSS Clip-Path Generator
Draw custom shapes visually and export ready-to-use clip-path CSS
CSS Background Pattern Generator
Generate seamless dots, stripes, grid, and checkerboard CSS background patterns
CSS Glassmorphism Generator
Design frosted-glass UI panels with blur, transparency, and border controls
Color Converter
Convert colors between HEX, RGB, and HSL formats instantly
Color Shades Generator
Generate tints, shades, and saturation variations from any base color
Color Mixer
Blend two colors and see every step of the gradient between them
Image Color Extractor
Upload an image and get its full color palette as HEX/RGB swatches
No tools match that search. Try a shorter task or format name.
Find the right tool by task
Start with what you need to accomplish, then open the most specific tool.
Build and convert colors
Translate formats, generate a scale or blend two colors into intermediate stops.
Extract colors from an image
Upload a visual reference and create a copyable palette from its dominant colors.
Quick pick
Which tool should I use?
Choose the result you need and jump straight to the right tool.
CSS Gradient Generator
Create a linear, radial or conic background
Design linear, radial, and conic CSS gradients with a live preview
CSS Box Shadow Generator
Design one or more shadows with a live preview
Design single or layered box-shadows with a live preview and copyable CSS
Color Shades Generator
Build tints, shades and saturation variations from one color
Generate tints, shades, and saturation variations from any base color
Image Color Extractor
Turn a reference image into a reusable palette
Upload an image and get its full color palette as HEX/RGB swatches
Good to know
Make the right choice before you start
01
Move from visual exploration to usable CSS
Adjust the controls until the preview matches the intended design, then copy the generated property into your stylesheet. The generators use standard CSS syntax and keep the output visible so it can be reviewed before use.
02
Build color systems, not isolated swatches
Start with a base color, create lighter and darker states, then check how those values work for backgrounds, text, borders and interaction states. The image extractor is useful for inspiration, while the converter and shade tools turn selections into consistent code values.
Frequently asked questions
Can I copy the generated CSS directly into a project?
Yes. The tools output standard CSS values. Review browser support and accessibility for the specific effect before production use.
What is the difference between a tint and a shade?
A tint moves a color toward white, while a shade moves it toward black. Both are useful for creating UI states and palette scales.
Are uploaded palette images stored?
Image color extraction runs in the browser, so the selected image does not need to be uploaded to RizCraft.
Related tool collections
Developer Tools
A curated set of free online developer tools: JSON formatter, SQL beautifier, CSS minifier, JWT decoder, regex tester, hash generator, and more. Fast, private, no sign-up.
Image & Media Tools
Convert images between WEBP, PNG, JPG, BMP, and GIF formats for free in your browser. Also generate QR codes, create code-to-image screenshots, and more. No upload required.
Web & Network Tools
Free browser-based web and network utilities: find your IP address, view page source, test iframe embedding, generate passwords and UUIDs, convert timestamps, and more.