ToolBox

DEVELOPER TOOL

CSS Gradient Generator

Build a linear gradient visually and copy the ready-to-use CSS.

About this tool

Pick a start color, end color, and angle to build a CSS linear gradient visually, with a live preview. Copy the generated background declaration straight into your stylesheet.

Frequently asked questions

What does the angle mean?
It follows the CSS linear-gradient() convention: 0deg points upward (bottom to top), 90deg points to the right, 180deg points downward, matching how the property behaves in real CSS.
Can I add more than two colors?
This generator focuses on clean two-color gradients, the most common case. For more color stops, add extra comma-separated color/position pairs to the generated CSS by hand.
Does this work in all browsers?
linear-gradient() is supported in all modern browsers without any vendor prefixes needed.
JSON Formatter & Validator

Format, validate, and minify JSON with clear error messages.

 Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 back to plain text.

 URL Encoder / Decoder

Percent-encode or decode text and URLs safely.

 Number Base Converter

Convert numbers between binary, octal, decimal, and hexadecimal.

 Markdown Previewer

Write Markdown and see the rendered HTML preview live.

 Text Diff Checker

Compare two blocks of text and highlight what changed.

 Slug Generator

Turn any title into a clean, URL-friendly slug.

 Regex Tester

Test a regular expression against text and see every match highlighted.

 UUID Generator

Generate random version 4 UUIDs, one or many at a time.

 HTML Entity Encoder / Decoder

Escape text to safe HTML entities, or decode entities back to text.

 JWT Decoder

Decode a JSON Web Token's header and payload without a server.

 Cron Expression Explainer

Turn a cron schedule expression into a plain-English description.

 Color Contrast Checker

Check whether a text and background color pair meets WCAG contrast rules.

 CSS Unit Converter

Convert between px, em, rem, and pt for a given base font size.

 URL Parser

Break a URL down into protocol, host, path, and query parameters.

 HTTP Status Code Reference

Look up what any HTTP status code means.

 Meta Tag Generator

Generate SEO and social-preview meta tags, with a live search-result preview.

 Image to Base64 Converter

Convert an image file into a Base64 data URI for embedding in code.

 JavaScript Minifier & Compressor

Shrink JavaScript for production using Terser, entirely in your browser.

 CSS Minifier & Compressor

Shrink CSS for production using CSSO, entirely in your browser.

 Screen Resolution & Device Info

See your screen resolution, viewport size, browser, and device details.

 IP Subnet Calculator

Calculate network address, broadcast, and usable host range from a CIDR block.

 cURL Command Generator

Build a properly quoted curl command from a method, URL, headers, and body.