RubanTools

Free UI Design & CSS Tools

20 curated tools for designers and UI developers - CSS generators, image utilities, colour tools, font pairing, and more. All free, no sign-up.

Color Picker

Pick colours and get HEX, RGB, HSL, CMYK values. Tints, shades, and harmony colour palettes with WCAG contrast.

Open Tool
CSS Gradient Generator

Create linear, radial and conic CSS gradients with custom colour stops. Copy CSS or download as PNG.

Open Tool
Border Radius Generator

Visual rounded-corner builder with lock-all or individual corner sliders, unit switcher (px/%), presets (Square, Pill, Circle) and live CSS output.

Open Tool
CSS Box Shadow Generator

Create multi-layer box shadows with live preview - sliders for X/Y offset, blur, spread, color and opacity. Copy CSS instantly.

Open Tool
SVG Blob Generator

Random organic blob shapes - adjust complexity, randomness, size and color. Fill styles: solid, gradient or outline. Download SVG or copy CSS clip-path.

Open Tool
Glassmorphism Generator

Frosted-glass CSS effect - blur, transparency and border sliders with a live card preview and instant CSS copy.

Open Tool
Neumorphism Generator

Soft-UI shadow builder - pick color, depth and blur, choose shape style (flat/convex/concave/pressed), live preview and copy CSS.

Open Tool
CSS Animation Generator

Visual @keyframes builder - add stops, set property + value at each %, live animated preview, pause/play, and export CSS.

Open Tool
CSS Grid Generator

Visual grid builder - click cells to create column/row spans, set gaps, and copy the full CSS grid-template-columns/rows output.

Open Tool
Dark Mode Color Converter

Paste your light-mode hex palette → get dark-mode equivalents using HSL lightness inversion, with side-by-side preview and CSS custom properties output.

Open Tool
Google Fonts Pairing Tool

Browse 12 curated heading + body font combinations, live text preview with adjustable sizes, filter by category (classic, modern, editorial) and copy @import code.

Open Tool
Favicon Generator

Upload an image and generate all standard favicon sizes (16×16 to 512×512). Download as ZIP bundle.

Open Tool
Image Compressor

Reduce JPEG, PNG and WebP image file size with adjustable quality. Side-by-side before/after comparison.

Open Tool
Image Resizer

Resize images by pixels or percentage - with aspect ratio lock, common presets and format selection.

Open Tool
Image Format Converter

Convert images between JPEG, PNG, WebP and BMP formats in your browser - private and instant.

Open Tool
Image to Base64

Convert images to Base64 data URLs - copy as CSS background, HTML img tag or raw Base64 string.

Open Tool
Open Graph Preview

Preview how your page link will look when shared on Facebook, LinkedIn and Twitter/X with mockup cards.

Open Tool
Meta Tag Generator

Generate all essential HTML meta tags - title, description, robots, canonical, Open Graph and Twitter Card.

Open Tool
Lorem Ipsum Generator

Generate lorem ipsum placeholder text - paragraphs, sentences or words. Optional HTML <p> wrapping.

Open Tool
QR Code Generator

Generate QR codes for URLs, text, vCard contacts, WiFi credentials and UPI payments with custom colours.

Open Tool

Other Professional Kits

For Accountants

GST calculator, invoice generator, TDS, income tax, salary and compliance tools for Indian accountants.

Browse
For Developers

JSON, Base64, hash, UUID, regex, diff, image tools, SEO generators and more for web developers.

Browse
For Doctors & Healthcare

BMI, BMR, calorie, body fat, pregnancy, ovulation and other clinical calculators for healthcare professionals.

Browse
For Real Estate

Area converters, stamp duty, home loan EMI, Vastu compliance and land-unit converters for property professionals.

Browse
For Astrologers

Numerology charts, compatibility, gemstone finder, Vastu and festival date tools for practising astrologers.

Browse
For Students

Study timer, timetable, GPA planner, attendance, rank predictor, MCQ generator, notes formatter and more for students.

Browse
For Teachers & Trainers

MCQ generator, question paper builder, grade calculator, marksheet, attendance sheet, lesson planner, rubric and timetable tools for educators.

Browse
For Content Creators

Hashtag generator, caption generator, YouTube title, script timer, word counter, readability checker, image tools and more for influencers and YouTubers.

Browse
For Small Business Owners

Inventory calculator, expense tracker, budget planner, UPI QR, invoice generator, GST calculator, payroll and profit margin tools for shop owners and SMEs.

Browse
For Traders & Investors

SIP, FD, PPF, NPS, capital gains, CAGR, mutual fund, gold rate, inflation and retirement calculators for traders and investors.

Browse
For Event Planners

Budget planner, countdown timer, currency converter, city distance, QR code, invoice, date calculator and image tools for event planners.

Browse
For Travel Agents

Currency converter, world clock, city distance, dial codes, unit converters, age calculator, gold rate and QR generator for travel agents.

Browse
For Lawyers & Legal Professionals

Limitation period calculator, court fee estimator, legal notice generator, NDA, privacy policy, GSTIN/PAN validator and financial tools for Indian lawyers.

Browse
For Civil & Electrical Engineers

Ohm's Law, electrical load and MCB sizing, concrete mix design, beam deflection, wire gauge, unit converters and financial tools for civil and electrical engineers.

Browse

Designer Tools FAQ

UI designers regularly need CSS generators for border-radius, box-shadow, gradients and animations. Other useful tools include color pickers, font pairing guides, glassmorphism and neumorphism generators, SVG blob makers and CSS grid builders. All are free on RubanTools.

Glassmorphism uses a frosted-glass effect: semi-transparent background, backdrop-filter blur, a light border and subtle shadow. Use our Glassmorphism Generator - adjust opacity, blur, border and border-radius with live sliders, then copy the CSS.

Use our Image Compressor - upload a PNG or JPEG and adjust the quality slider. Compression runs entirely in your browser. For web use, 70–80% quality gives the best balance of file size and visual quality.