CSS Gradyan Oluşturucu

A visual CSS gradient generator that runs in your browser

This CSS gradient generator turns the fiddly linear-gradient(), radial-gradient() and conic-gradient() syntax into a few clicks. Add and drag color stops on the gradient bar, set the angle or center, and watch a full-size live preview update as you go. When it looks right, copy production-ready code. There's nothing to install and no account to create, and every gradient is rendered locally so nothing you build is ever uploaded.

It's designed to be the only gradient tool you need: more complete than single-purpose generators like cssgradient.io (no conic support, no Tailwind output) or Colorzilla's browser extension (no PNG export). Unlike Canva's gradient background tool that locks features behind an account, or Adobe's gradient tools that require a Creative Cloud subscription, everything here is free.

Linear, radial and conic — every gradient type

Switch between a linear gradient generator (blend along an angle), a radial gradient generator (spotlight from a center, circle or ellipse, with size and position control) and a conic gradient generator (colors swept around a point for wheels and charts). Each type exposes exactly the controls it needs: an angle for linear, shape/size/position for radial, a starting angle and center for conic.

Add unlimited color stops, drag them to reposition, and set a per-stop opacity to create smooth transparent gradients with rgba(). Click the bar to drop a new stop exactly where you point. Most competitor tools like Colorzilla only support two or three stops; here there's no limit, so complex five- or six-stop gradients are just as easy as simple two-color blends.

Copy CSS, Tailwind or SCSS — and export a PNG

Output is a tab away. The CSS tab gives you a ready background declaration with an optional -webkit- fallback (angle-converted correctly for legacy browsers). The Tailwind tab produces idiomatic bg-gradient-to-r from-[...] to-[...] utilities for linear gradients, falling back to a bg-[linear-gradient(...)] arbitrary value for radial and conic. The SCSS tab wraps the value in a reusable $gradient variable.

Need a raster? Download PNG paints the exact gradient onto a canvas at 1600x900 — a true gradient PNG download with no watermark and no server round-trip. Adobe Express puts this behind a subscription. TinyWow requires a file upload. Here it's free and nothing leaves your device.

Generate a gradient from an image

Want a gradient that matches a brand photo, screenshot or product shot? Use From image: the tool samples the picture's pixels right in your browser, finds its dominant colors, and seeds a multi-stop gradient from them, ordered light to dark for a smooth blend. Because the analysis happens locally, the image is never uploaded anywhere.

From there you can nudge the extracted stops, change the angle, drop a color's opacity, or switch to a radial or conic blend. It's the fastest way to build a gradient background CSS snippet that ties a hero section, card or button to an existing image — no Figma plugin or Adobe extension required.

Presets, randomizer and shareable links

Stuck for ideas? Tap a curated preset — sunset, ocean, aurora, mint, peach and more — to load a polished gradient, then adjust it from there. Hit Random for a fresh, harmonious two- or three-color combination. It's a good starting point when you need something that looks good without spending time on color theory.

Every change you make is encoded into the page URL, so Copy link hands a teammate the exact gradient you're looking at — no export, no account, no screenshot. The link carries the colors, type, angle and stops, so it works entirely client-side with no server lookup. Something tools like Figma and Canva can't do without an account.

Private and free — no upload, no account

There's no sign-up, no cost, and nothing to upload. This CSS gradient maker runs entirely on your device using JavaScript and an HTML canvas, so confidential brand colors and unreleased designs never leave your browser. Bookmark it as your go-to linear, radial and conic gradient generator for backgrounds, buttons, hero sections, overlays and charts. Copy CSS, Tailwind or SCSS, or export a PNG, any time you need one. Works on iPhone, Android, Windows and Mac equally well.

CSS gradient syntax in depth: angles, shapes, and hard stops

linear-gradient accepts either a keyword direction (to right, to bottom right) or a degree value. The degree value measures the angle of the gradient line clockwise from a 12-o'clock start: 0deg goes bottom-to-top, 90deg goes left-to-right, 180deg goes top-to-bottom, and 45deg cuts diagonally from the bottom-left corner. to right and 90deg are identical; the keyword form is easier to read, while the degree form lets you set fractional angles like 37deg with precision.

radial-gradient gives you control over three independent axes: shape (circle or ellipse), size (keywords closest-side, closest-corner, farthest-side, or farthest-corner, which determine where the gradient ends relative to the containing box), and position (any valid CSS background-position value, defaulting to center). conic-gradient sweeps colors around a center point like a pie chart. Adding a from <angle> argument rotates the start of the sweep, so conic-gradient(from 90deg, red, blue) begins the sweep pointing right instead of up. Conic gradients produce color wheels, pie charts, progress rings, and angular glow effects without any SVG or JavaScript.

Repeating gradients — repeating-linear-gradient and repeating-radial-gradient — tile the defined stop sequence to fill the element, letting you build CSS-only stripes, hatch patterns, and sunburst effects in a single property. A hard stop is created by placing two color stops at the same position: linear-gradient(red 50%, blue 50%) produces a clean 50/50 split with no blend at all. Hard stops are the building block for checkerboard backgrounds, CSS-only flags, and any design that needs a sharp edge between two colors — no image, no clip-path required.

The colour interpolation problem — and why OKLCH gradients look better

By default, browsers interpolate gradient colors in the sRGB color space, which causes a well-known visual artifact: a gradient from red to blue passes through a desaturated grey-purple midpoint. The issue is geometric — sRGB's three axes are not perceptually uniform, so the straight-line path between two vivid hues crosses a region of low chroma. The result looks muddy in the middle even though the start and end colors are fully saturated.

CSS Color Level 4 introduced a solution: you can declare which color space to use for interpolation by writing in <colorspace> as the first argument. linear-gradient(in oklch, red, blue) interpolates in OKLCH — a perceptually uniform space where equal numeric steps produce equal-looking brightness changes — and the midpoint stays vivid and saturated the whole way across. OKLCH gradients are supported in all major browsers since 2023 (Chrome 111, Firefox 113, Safari 16.2). The in hsl option is a lighter alternative that avoids the grey midpoint on hue-adjacent colors but can still dip in lightness on longer hue arcs; in lch is LCH interpolation, perceptually uniform but without OKLCH's improved blue-purple handling.

The practical takeaway: whenever you create a multi-hue gradient — especially red→blue, green→purple, or any pair separated by more than 90° on the color wheel — switching to in oklch gives you richer color without any extra stops. For gradients between two shades of the same hue (e.g., light blue to dark blue), sRGB and OKLCH look nearly identical, so the default is fine. You can experiment with the color space setting in this tool's Advanced panel to see the interpolation difference live in your browser.

Gradient design history: from skeuomorphism to mesh gradients

Gradients were ubiquitous in the skeuomorphic era of UI design (roughly 2007–2012), where shiny button bevels and leather-textured sidebars leaned on radial highlights and linear light-to-dark shading to simulate physical surfaces. When Apple's iOS 7 (2013) and Google's Material Design (2014) ushered in flat design, gradients fell sharply out of fashion — a single flat color became the mark of modern taste. CSS gradient generators saw a slump, and many style guides banned them outright.

The gradient renaissance began in June 2016 when Instagram replaced its camera icon with a bold coral-to-purple gradient logo — a deliberate rejection of the previous flat-brown monogram. The redesign was controversial for about 48 hours and then became enormously influential: within a year, vibrant multi-hue gradients had spread across app icons, landing pages, and brand identities. The duotone effect — a two-color gradient overlay on a greyscale image, popularized by Spotify's 2015–2016 festival campaign — became a staple of editorial and music-industry design.

Mesh gradients emerged as the dominant trend from 2021 onward. Unlike CSS gradients, which transition along a single axis or from a single point, a mesh gradient places multiple color nodes at arbitrary positions and interpolates between all of them simultaneously, producing organic blob-like color fields. Pure CSS cannot generate true mesh gradients (they require SVG <feComposite> filters or canvas-drawn bezier fields), but the visual style is widely emulated with overlapping radial gradients at reduced opacity. Similarly, glassmorphism — a frosted-glass panel floating over a blurred gradient background — became popular in 2021 and relies entirely on a vivid underlying gradient to make the blur effect legible. Understanding this history helps you choose a gradient style that signals the right era and aesthetic for your project.

Accessibility: contrast on gradient backgrounds

WCAG 1.4.3 requires a contrast ratio of at least 4.5:1 between normal text and its background (3:1 for large text), and this requirement applies at every point where the text sits — not just the average color of the gradient. If a headline spans a background that blends from near-white to deep navy, the contrast must pass at the worst-case point: you must check the text color against the lightest section of the gradient it covers. A gradient that passes in the dark region can fail in the light region, and the entire element fails the criterion.

The practical approach is to check contrast at both endpoints of the gradient beneath the text, and at any intermediate stop that falls within the text's bounds. Tools like the browser's built-in accessibility inspector or contrast-checking extensions accept a single sampled color, so you may need to sample two or three points manually. One reliable workaround is to place a semi-transparent dark overlay — for example rgba(0,0,0,0.45) — between the gradient and the text layer; this narrows the contrast range so the text is readable across the entire span. A text-shadow (text-shadow: 0 1px 4px rgba(0,0,0,0.6)) is another common technique that adds local contrast without visually altering the gradient.

WCAG also applies to interactive states: if a button uses a gradient background, the contrast requirement must be met in its default, hover, focus, and active states independently. A gradient shift on hover that moves through a low-contrast midpoint fails 1.4.3 during the transition in browsers that render intermediate frames. The safest pattern is to animate opacity between two pre-rendered gradient pseudo-elements (::before and ::after) rather than animating the gradient property itself — this avoids both the contrast-transition problem and the paint-performance cost of animating background-image directly.