Skip to content
Marvin's Toolbox.

Search tools

Type to filter all tools

CSS Gradient Generator

Build linear, radial and conic CSS gradients visually: add and drag color stops, set the angle or center, preview the result live and copy the generated CSS. Includes ready-made presets to start from.

Everything runs locally in your browser. Your data never leaves your device.

Preview

Color stops

Click an empty spot on the bar to add a stop there. Drag a handle to move it, or focus one and nudge it with the arrow keys, Shift for 10% steps, Delete to remove it.

100%
%

Settings

°

The output always uses the exact angle. Corner keywords depend on the box shape, so these buttons set the matching compass angles instead.

Presets

CSS output

Background
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Gradient functionfor background-image, masks or borders
linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)
With solid color fallbackpaints the first stop where gradients are unsupported
background: #3b82f6;
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

Next steps

Keep going. These tools open with your result loaded in.

Text Case Converter

Convert text into every case at once: title case in the APA, AP, Chicago, MLA, Bluebook, AMA and NYT styles, sentence case, upper, lower, camelCase, snake_case, kebab-case and more, each with its own copy button.

textconverter

Word & Character Counter

Count words, characters, sentences, paragraphs, lines and more as you type, with estimated reading and speaking time.

text

Dedupe Lines

Remove duplicate lines from a list or text, keeping the first occurrence. Optionally ignore case and whitespace, or drop blank lines too.

textdev

Find and Replace

Replace text in two modes: plain find and replace all, or regular expressions with flag controls and capture group references like $1.

textdev

Text Diff

Compare two texts and see every added, removed and changed line highlighted, side by side or inline, with the changed words marked within each line. Ignore case, whitespace or blank lines, read a summary of how much changed, and export the result as a unified diff.

textdev

UUID Decoder

Paste a UUID to see what it carries: version, variant, and for time-based versions the exact timestamp, clock sequence and node. Also shows the raw bytes, the 128-bit integer and the URN form.

devuuid

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

Number Base Converter

Convert numbers between binary, octal, decimal, hexadecimal and any base up to 36. Type into any field and the others update as you go. Handles huge integers without losing precision and accepts 0x, 0b and 0o prefixes.

devconvertercalculator

Scientific Notation Converter

Convert between scientific notation and full numbers as you type. Reads 1.23e5, 1.23 × 10^5 and plain numbers, shows the value written out, in normalized scientific notation and in engineering notation, and can round to any number of significant digits.

convertercalculator

About the CSS Gradient Generator

This tool builds CSS gradients visually. Pick linear, radial or conic, drop color stops on a bar and drag them into place, and the preview plus the generated CSS update as you work. Each stop has its own color and opacity, so soft fades into transparency work the same way as hard color bands.

Set a linear gradient's angle with a dial, a number field or the eight compass directions. Radial gradients get a shape, a size keyword and a center position, conic gradients a start angle and a center. When it looks right, copy the background declaration, the bare gradient function or a two line version with a solid color fallback.

What you can do

  • Generate linear-gradient, radial-gradient and conic-gradient CSS.
  • Add, drag and delete color stops on a visual editor bar.
  • Set per stop opacity for gradients that fade to transparent.
  • Set the gradient angle with a dial or exact degrees.
  • Position a radial or conic gradient's center anywhere in the box.
  • Make any gradient repeating for stripes and patterns.
  • Start from ready-made presets, from subtle UI washes to vivid blends.
  • Copy the CSS as a background declaration or with a solid color fallback.

How to use the CSS Gradient Generator

  1. 1Pick the gradient type, linear, radial or conic.
  2. 2Click the stop bar to add colors, drag the handles to place them, and tune each stop's color, opacity and position.
  3. 3Set the angle for linear and conic gradients, or the shape, size and center for radial ones.
  4. 4Check the live preview. The checkerboard behind it shows where the gradient is transparent.
  5. 5Copy the generated CSS, either the background line or the version with a solid color fallback.

Linear, radial and conic gradients

A linear gradient blends colors along a straight line at an angle you choose. 0deg runs bottom to top and 90deg left to right, matching how CSS counts degrees. A radial gradient grows outward from a center point as a circle or an ellipse, and the size keywords control where it ends, at the farthest corner or the closest side for example. A conic gradient sweeps its colors around the center like a color wheel, which is also how pie charts and sheen effects are made in pure CSS.

The generated code sticks to plain, widely supported syntax: exact degree angles, percentage positions and hex colors. Semi-transparent stops use 8 digit hex like #0ea5e980, which every current browser understands. Corner keywords like to top right are avoided on purpose, they depend on the box's aspect ratio, so the tool writes the exact angle instead.

Working with color stops

Every stop has a color, an opacity and a position from 0% to 100% along the gradient line. Click an empty spot on the stop bar to insert a stop with the color the gradient already shows there, so inserting never changes the look until you edit it. Two stops sharing one position create a hard edge instead of a blend, which is the trick behind stripes and color bands. The quick actions spread the stops out evenly, mirror the gradient or turn the whole thing a quarter turn.

Need a color in a different notation, or want to reuse one you already have? The Color Converter translates between hex, RGB, HSL, OKLCH and more. And if the surface needs depth as well as color, the CSS Box Shadow Generator builds the matching shadow.

Repeating gradients

The repeating toggle switches the output to repeating-linear-gradient and its radial and conic siblings. The stop list then describes one tile that CSS repeats forever, so keep the stops in a short range, from 0% to 10% for example, to get stripes. The Candy stripes preset shows the pattern.

Related tools

Color Contrast Checker

Check two colors against the WCAG contrast rules. Type or pick a text and a background color, read the contrast ratio, see which AA and AAA checks pass, preview real text at the sizes WCAG distinguishes, and get suggested fixes when a check fails.

devcolor

Color Converter

Convert a color between HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH and OKLAB. Type into any field and the others update as you go, or pick the color visually. Reads CSS color syntax and keeps alpha where the format supports it.

convertercolordev

Aspect Ratio Calculator

Enter a resolution to get its simplified aspect ratio, or start from a ratio and one side to get the missing dimension. Knows the common ratios like 16:9, 4:3 and 21:9 and shows how close your size is to each.

calculatorimagedev

Barcode Generator

Create barcodes in dozens of formats, from EAN-13, UPC-A and Code 128 to QR Code, Data Matrix and PDF417. Type the content, tune the size, colors and text options, and download the result as PNG or SVG.

mediaimagedev

Base64 Encoder & Decoder

Decode Base64 to text or encode text to Base64. Paste into the top box, read the result below, and flip the direction with one click. Handles Unicode correctly, reads URL-safe Base64, and shows binary payloads as a hex dump you can download.

devconvertertext

Checksum Validator

Verify a checksum online: drop a file, paste the expected checksum and see instantly whether they match. The hash type is detected from the checksum itself, covering MD5, SHA-1, SHA-256, SHA-512, BLAKE3, CRC-32 and more, and sha256sum lines or whole checksum files can be pasted as-is.

devsecurity