{"id":122,"date":"2026-10-07T10:16:41","date_gmt":"2026-10-07T10:16:41","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=122"},"modified":"2026-10-07T10:16:44","modified_gmt":"2026-10-07T10:16:44","slug":"css-gradient-generator-create-smooth-layered-animated-gradients-free-guide","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/css-gradient-generator-create-smooth-layered-animated-gradients-free-guide\/","title":{"rendered":"CSS Gradient Generator: Create Smooth, Layered &amp; Animated Gradients (Free Guide)"},"content":{"rendered":"<p><!--\n================================================================\n  POST TITLE (paste into the WordPress title field \u2014 it becomes the page H1)\n  CSS Gradient Generator: Create Smooth, Layered & Animated Gradients (Free Guide)\n\n  SEO TITLE (56 chars, target 50\u201360, max 60 \u2014 \"Optimize SEO\" panel \u2192 SEO TITLE)\n  CSS Gradient Generator: OKLCH, Layers, Grain & Animation\n\n  SEO DESCRIPTION (154 chars, target 150\u2013160, max 160 \u2014 \"Optimize SEO\" panel \u2192 SEO DESCRIPTION)\n  Free CSS gradient generator: linear, radial and conic gradients, OKLCH blending, grain, layers, animation and Tailwind export. 15 live demos, Fork & Edit.\n\n  HOW TO PASTE: click the first line after this comment, press Ctrl+Shift+End, Ctrl+C.\n  In WordPress click \"Type \/ to choose a block\", then Ctrl+V.\n  Fallback: \u22ee menu \u2192 Code editor \u2192 paste.\n================================================================\n--><\/p>\n\n\n<p class=\"wp-block-paragraph\">A CSS gradient is one line of code \u2014 until you want it to look <em>good<\/em>. The colors turn grey in the middle. A big background shows ugly bands. You want a soft glow on top of another gradient, a pie chart, an animated button, gradient text, a border that keeps its rounded corners \u2014 and then the same thing again as Tailwind classes or a React style object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The free <a href=\"https:\/\/webdevpuneet.com\/gradient-generator\/\">CSS Gradient Generator<\/a> on webdevpuneet.com handles all of it visually. You build <strong>linear, radial and conic gradients<\/strong>, blend them in a smooth color space like <strong>OKLCH<\/strong>, stack up to six layers, add film grain, animate the result, check text contrast, and copy the code as <strong>CSS, Tailwind, SCSS, a CSS variable or a React component<\/strong> \u2014 or download it as a PNG or SVG. When you want to go further, <strong>Fork &amp; Edit<\/strong> opens it on a ready-made page in My Code so you can keep editing the HTML and CSS until it is completely yours.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide shows every feature with <strong>15 live demos<\/strong>. Each demo is real code the generator produces: use the <strong>HTML<\/strong>, <strong>CSS<\/strong> and <strong>JS<\/strong> tabs in its top bar to read it, and the <strong>Fork &amp; Edit<\/strong> button to open it in <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/mycode\/\">My Code<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to make a CSS gradient in 60 seconds<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the <a href=\"https:\/\/webdevpuneet.com\/gradient-generator\/\">CSS Gradient Generator<\/a>. It starts with a ready-made three-color gradient.<\/li>\n\n\n\n<li>Pick <strong>Linear<\/strong>, <strong>Radial<\/strong> or <strong>Conic<\/strong> in the <strong>Type<\/strong> section.<\/li>\n\n\n\n<li>Edit the <strong>color stops<\/strong>: click the gradient bar to add one, drag a handle to move it, and use the color picker, hex field and opacity box to change it.<\/li>\n\n\n\n<li>Choose <strong>OKLCH<\/strong> under <strong>Smoothness<\/strong> so the colors stay vivid in the middle.<\/li>\n\n\n\n<li>Pick <strong>CSS<\/strong>, <strong>Tailwind<\/strong>, <strong>SCSS<\/strong>, <strong>CSS Variable<\/strong> or <strong>React<\/strong> above the code and click <strong>Copy<\/strong> \u2014 or click <strong>Fork &amp; Edit<\/strong> to keep building.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what you get before you change anything: the default gradient on a hero section, exactly as the <strong>Fork &amp; Edit<\/strong> button hands it to My Code. Open the <strong>CSS<\/strong> tab and notice the two <code>background<\/code> lines \u2014 the first is an sRGB fallback for old browsers, the second is the smooth OKLCH version.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/1.html\" style=\"width:100%;height:380px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"CSS Gradient Generator Default Hero Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">A quick tour of the gradient generator<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The tool is split into two columns. On the left are the controls, from top to bottom: <strong>Layers<\/strong>, <strong>Type<\/strong>, <strong>Color stops<\/strong>, <strong>Smoothness<\/strong>, <strong>Grain<\/strong>, <strong>Animate<\/strong> and <strong>Presets<\/strong>. On the right is a big live preview with six view modes \u2014 <strong>Background<\/strong>, <strong>Hero<\/strong>, <strong>Card<\/strong>, <strong>Buttons<\/strong>, <strong>Text<\/strong> and <strong>Border<\/strong> \u2014 plus the export code, the image download options and the <strong>Share link<\/strong> and <strong>Fork &amp; Edit<\/strong> buttons. Every change updates the preview and the code instantly, and your work auto-saves in your browser.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">16 presets to start from<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Starting from something good is faster than starting from nothing. The <strong>Presets<\/strong> section has sixteen one-click gradients, and each one also sets the color space, easing and grain that suit it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simple linear gradients<\/strong> \u2014 Cosmic, Sunset, Ocean, Forest, Fire, Neon, Aurora and Rose.<\/li>\n\n\n\n<li><strong>Layered looks<\/strong> \u2014 Aurora mesh, Spotlight and Peach glow, built from several stacked layers.<\/li>\n\n\n\n<li><strong>Texture and smoothness<\/strong> \u2014 Grainy sunset (eased, with grain) and Rainbow (OKLCH long hue).<\/li>\n\n\n\n<li><strong>Patterns<\/strong> \u2014 Candy stripes, Pie chart and Ripples, using hard stops and repeating gradients.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Randomize<\/strong> to swap in random colors for the selected layer, and <strong>Reset<\/strong> to return to the default.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Linear, radial and conic gradients explained<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The three gradient types are three different ways of spreading colors across a box. The generator gives each type the controls that matter for it.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Type<\/th><th>Colors change\u2026<\/th><th>Controls in the tool<\/th><th>Good for<\/th><\/tr><\/thead><tbody><tr><td><strong>Linear<\/strong><\/td><td>along a straight line<\/td><td>Draggable angle dial, angle slider, one-click angle chips (0\u00b0, 45\u00b0, 90\u00b0, 135\u00b0, 180\u00b0, 270\u00b0)<\/td><td>Backgrounds, buttons, hero sections, overlays<\/td><\/tr><tr><td><strong>Radial<\/strong><\/td><td>outward from a center point<\/td><td>Ellipse or circle, size keyword, center X\/Y \u2014 or drag the center on the preview<\/td><td>Glows, spotlights, vignettes, mesh layers<\/td><\/tr><tr><td><strong>Conic<\/strong><\/td><td>around a center point, like a clock hand<\/td><td>Start angle dial, center X\/Y \u2014 or drag the center on the preview<\/td><td>Pie charts, color wheels, shiny metallic effects<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For radial gradients you can pick <code>farthest-corner<\/code>, <code>closest-side<\/code>, <code>farthest-side<\/code> or <code>closest-corner<\/code>, which changes how far the gradient stretches before it ends. The easiest way to place the center is to <strong>drag it directly on the preview<\/strong>. The demo below does the same thing in plain JavaScript: the radial gradient&#8217;s center is just two CSS variables, <code>--x<\/code> and <code>--y<\/code>, updated as you move. Move your mouse (or finger) over it.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/7.html\" style=\"width:100%;height:340px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Radial Gradient Center Follows Pointer Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Color stops: add, drag, fade and nudge<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A gradient is a list of color stops. In the generator you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Click the gradient bar<\/strong> to add a stop. It starts with the color the gradient already has at that point, so adding a stop never changes how it looks until you edit it.<\/li>\n\n\n\n<li><strong>Drag a handle<\/strong> to move a stop, or focus it and use the <strong>\u2190 \u2192 arrow keys<\/strong> (hold <strong>Shift<\/strong> to move by 10%). Press <strong>Delete<\/strong> to remove it.<\/li>\n\n\n\n<li>Change a stop&#8217;s <strong>color<\/strong> with the picker or by typing a hex value, and its <strong>opacity<\/strong> from 0 to 100%. Opacity is what makes layered gradients work \u2014 more on that below.<\/li>\n\n\n\n<li>Use the <strong>position slider<\/strong> next to each stop for exact placement, or <strong>+ Add<\/strong> to insert a stop halfway along the gradient.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why does my CSS gradient look grey in the middle?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This is the most common gradient complaint, and it is not your colors \u2014 it is the math. Browsers blend gradient colors in the <strong>sRGB<\/strong> color space by default. When two bright colors sit far apart on the color wheel, such as blue and yellow, sRGB averages their red, green and blue values and lands on a dull grey-olive in the middle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The fix is to blend in a color space designed around how people see color. The <strong>Smoothness<\/strong> section lets you switch with one click, and the exported CSS uses the modern <code>linear-gradient(in oklch \u2026)<\/code> syntax. Compare the same two colors blended four ways:<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/2.html\" style=\"width:100%;height:540px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"sRGB vs OKLab vs OKLCH Color Space Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Color space<\/th><th>What it does<\/th><th>Use it when<\/th><\/tr><\/thead><tbody><tr><td><strong>sRGB<\/strong><\/td><td>The browser default. Mixes red, green and blue values directly.<\/td><td>You need identical results everywhere, or the two colors are close together.<\/td><\/tr><tr><td><strong>OKLab<\/strong><\/td><td>Perceptually even. Removes the grey dead zone without changing hue much.<\/td><td>Subtle, natural-looking blends and soft overlays.<\/td><\/tr><tr><td><strong>OKLCH<\/strong><\/td><td>Keeps lightness and saturation steady while travelling around the hue wheel.<\/td><td>Vivid gradients between colors that sit far apart. This is the generator&#8217;s default.<\/td><\/tr><tr><td><strong>OKLCH long<\/strong><\/td><td>Goes the <em>long way<\/em> round the hue wheel.<\/td><td>Rainbow sweeps and color wheels.<\/td><\/tr><tr><td><strong>HSL<\/strong><\/td><td>Hue-based mixing. Bright, but less even than OKLCH.<\/td><td>A punchy, saturated look, as in the demo above.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Browser support and the automatic fallback<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">CSS color interpolation (<code>in oklch<\/code>, <code>in oklab<\/code>, <code>in hsl<\/code>) works in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+. You do not need to worry about older browsers: whenever you choose a color space other than sRGB, the generator writes a plain sRGB <code>background<\/code> line <em>first<\/em> and the modern one second. Browsers that do not understand the second line ignore it and use the first.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.gradient {\n  \/* sRGB fallback for browsers without CSS color-space interpolation *\/\n  background: linear-gradient(135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);\n  background: linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rainbow gradients with OKLCH long hue<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose <strong>OKLCH long<\/strong> and the gradient takes the long route around the hue wheel instead of the short one. That turns two almost identical colors into a full rainbow, with no extra stops. The Rainbow preset below is just two reds, <code>#ff4d6d<\/code> and <code>#ff5e4d<\/code>, written as <code>in oklch longer hue<\/code>.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/4.html\" style=\"width:100%;height:340px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Rainbow Gradient OKLCH Long Hue Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Eased gradients: remove the harsh line at each color stop<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Look closely at a normal gradient with three colors and you can often see a faint line where it passes through the middle stop. That is because the color changes at a constant rate and then suddenly changes direction. Turn on <strong>Eased gradient<\/strong> and the generator adds seven in-between stops per segment that follow an ease-in-out curve, mixed in your chosen color space, so each transition starts and ends gently. It is the same technique used for smooth hero backgrounds and the dark gradients laid over photos.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/3.html\" style=\"width:100%;height:400px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Eased Gradient vs Normal Gradient Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">The trade-off is longer CSS \u2014 the eased bar above is 17 stops instead of 3 \u2014 which is fine for a background and not something you would write by hand.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to make a grainy gradient in CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The soft, noisy, film-grain look is everywhere in modern design, and it has a practical benefit: grain hides <strong>banding<\/strong>, the visible steps that appear in large, subtle gradients. Move the <strong>Grain<\/strong> slider (0\u201360%) and the generator adds a tiny SVG noise image on top of your gradient and blends it with <code>background-blend-mode: overlay<\/code>. It is pure CSS \u2014 no image file to host \u2014 and PNG and SVG downloads include the grain too. Drag the slider in the demo to see the difference.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/5.html\" style=\"width:100%;height:340px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Grainy Gradient With Grain Slider Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Layered gradients: build a mesh-style background<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">One gradient is a start. The real power is <strong>layers<\/strong>: the generator stacks up to six gradients on top of each other, and the CSS export lists them all in one <code>background<\/code> declaration, top layer first.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click <strong>+ Layer<\/strong> to add a soft radial glow on top of the current gradient. New layers start with a random color that fades to <strong>0% opacity<\/strong>, which is what lets the layers underneath show through.<\/li>\n\n\n\n<li>Select any layer to edit its type, angle, center and stops. Use the <strong>\u2191 \u2193<\/strong> buttons to reorder layers and <strong>\u00d7<\/strong> to remove one.<\/li>\n\n\n\n<li>Give each upper layer a <strong>blend mode<\/strong> \u2014 <code>screen<\/code>, <code>overlay<\/code>, <code>multiply<\/code>, <code>soft-light<\/code> and a dozen more \u2014 for effects plain stacking cannot do.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Aurora mesh<\/strong> preset is three soft radial glows over a dark linear base, mixed in OKLab with a touch of grain. Four layers, one <code>background<\/code> property:<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/6.html\" style=\"width:100%;height:360px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Layered Aurora Mesh Gradient Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">If you want a truly organic, blob-style mesh with draggable anchor points, try the sister tool, the <a href=\"https:\/\/webdevpuneet.com\/mesh-gradient-generator\/\">Mesh Gradient Generator<\/a>. For most page backgrounds, stacked radial layers in this tool are lighter and easier to export.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS stripes, pie charts and ripples with hard stops<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Two checkboxes in the <strong>Type<\/strong> section turn smooth gradients into patterns:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hard stops<\/strong> turns every color into a solid band with a sharp edge. On a conic gradient, each stop position becomes a slice boundary \u2014 a pie chart.<\/li>\n\n\n\n<li><strong>Repeating<\/strong> repeats the gradient every N pixels (or degrees for conic), using <code>repeating-linear-gradient<\/code>, <code>repeating-radial-gradient<\/code> or <code>repeating-conic-gradient<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Combine them for candy stripes, or use repeating alone for ripples. The <strong>Candy stripes<\/strong>, <strong>Pie chart<\/strong> and <strong>Ripples<\/strong> presets show each pattern, and none of them needs an image:<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/8.html\" style=\"width:100%;height:420px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Hard Stops and Repeating Gradient Patterns Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Animated gradient CSS: six one-click animations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Animate<\/strong> section turns any gradient into a moving one and writes the <code>@keyframes<\/code> for you. There are six animations and a speed slider from 1 to 12 seconds:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Slide<\/strong> \u2014 the gradient drifts left and right (<code>background-position<\/code> on an oversized background).<\/li>\n\n\n\n<li><strong>Diagonal<\/strong> \u2014 the same idea, moving corner to corner.<\/li>\n\n\n\n<li><strong>Hue Shift<\/strong> \u2014 the whole gradient cycles through every hue with <code>filter: hue-rotate()<\/code>.<\/li>\n\n\n\n<li><strong>Breathe<\/strong> \u2014 the gradient swells and shrinks.<\/li>\n\n\n\n<li><strong>Pulse<\/strong> \u2014 the opacity fades in and out.<\/li>\n\n\n\n<li><strong>Spin<\/strong> \u2014 the angle of the top linear layer rotates continuously. It uses a registered <code>@property<\/code>, which works in Chrome, Edge, Safari 16.4+ and Firefox 128+.<\/li>\n<\/ul>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/9.html\" style=\"width:100%;height:470px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Six Animated Gradient Presets Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">Gradient animation is easy to add, but always respect people who ask for less motion. The demo&#8217;s CSS ends with a <code>prefers-reduced-motion<\/code> rule that switches the animation off, and it is worth copying that into your own project:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (prefers-reduced-motion: reduce) {\n  .gradient { animation: none; }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Real-world previews: text, borders, buttons, cards and heroes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A gradient looks different on a button than it does on a full-screen background, so the preview has six modes. Each one changes the exported CSS to match.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gradient text with background-clip<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Switch to <strong>Text<\/strong> and the gradient is clipped to the letters. The export includes the <code>-webkit-<\/code> prefixes Safari still needs, and the same sRGB fallback line as before.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/10.html\" style=\"width:100%;height:340px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Gradient Text with background-clip Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<pre class=\"wp-block-code\"><code>.gradient-text {\n  background: linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);\n  background-clip: text;\n  -webkit-background-clip: text;\n  color: transparent;\n  -webkit-text-fill-color: transparent;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gradient border that keeps its rounded corners<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>border-image<\/code> trick breaks <code>border-radius<\/code>. The <strong>Border<\/strong> mode uses the <code>padding-box<\/code> \/ <code>border-box<\/code> technique instead: a solid layer covers the inside, the gradient shows through the transparent border, and the rounded corners survive.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/11.html\" style=\"width:100%;height:360px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Gradient Border With Rounded Corners Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">To change the thickness, edit the <code>2px<\/code> in the exported <code>border<\/code> line, or the background color of the inner <code>linear-gradient(#ffffff, #ffffff)<\/code> layer to match a dark card.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gradient buttons and the contrast check<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Text on a gradient is easy to get wrong because the background changes underneath it. In the <strong>Hero<\/strong>, <strong>Buttons<\/strong> and <strong>Border<\/strong> previews the generator renders the gradient, measures the <em>worst-case<\/em> WCAG contrast of white text and of dark text across it, picks the more readable one and shows the ratio with an <strong>AA<\/strong>, <strong>AA large<\/strong> or <strong>Fails<\/strong> badge. The exported CSS already contains the winning <code>color<\/code>.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/12.html\" style=\"width:100%;height:340px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Gradient Buttons With Contrast Check Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">The Neon button above only reaches 3:1, so it passes for large text but not for small body copy \u2014 exactly the kind of thing that is hard to see by eye. For a deeper audit of any color pair, use the <a href=\"https:\/\/webdevpuneet.com\/color-contrast-checker\/\">Color Contrast Checker<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Copy the code: CSS, Tailwind, SCSS, CSS variable and React<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Above the code box are five export tabs. Every tab describes the same gradient, in the format your project already uses. Here is the Rose gradient in all five:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>.gradient {\n  \/* sRGB fallback for browsers without CSS color-space interpolation *\/\n  background: linear-gradient(135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);\n  background: linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tailwind CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Tailwind tab writes one arbitrary-value class \u2014 spaces become underscores \u2014 that works in Tailwind v3 and v4. When your gradient uses blend modes the tab adds a <code>[background-blend-mode:\u2026]<\/code> class, and in Text mode it adds <code>bg-clip-text text-transparent<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"bg-&#91;linear-gradient(in_oklch_135deg,_#f64f59_0%,_#c471ed_50%,_#12c2e9_100%)]\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">SCSS<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>$gradient:\n  linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);\n\n.gradient {\n  background: $gradient;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">CSS variable<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n  --gradient:\n    linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%);\n}\n\n.gradient {\n  background: var(--gradient);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">React<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>const gradientStyle = {\n  background: `linear-gradient(in oklch 135deg, #f64f59 0%, #c471ed 50%, #12c2e9 100%)`,\n};\n\nexport default function Gradient({ children }) {\n  return &lt;div style={gradientStyle}&gt;{children}&lt;\/div&gt;;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The React version drops straight into Next.js, Vite or Create React App. The CSS variable version is the best choice for a design system, because one value can theme your whole interface:<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/13.html\" style=\"width:100%;height:420px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"One CSS Variable Themes the Whole UI Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">Click the four themes. The card header, the badge, the progress bar and the button all read <code>var(--gradient)<\/code>, so swapping one custom property re-themes everything. Fork this demo to see how little code it takes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Download a gradient as a PNG or SVG image<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sometimes you need a picture, not CSS: a wallpaper, a social card background, a slide or a placeholder. Pick a size, then click <strong>PNG<\/strong> or <strong>SVG<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1920\u00d71080<\/strong> and <strong>2560\u00d71440<\/strong> \u2014 desktop wallpapers and video backgrounds.<\/li>\n\n\n\n<li><strong>1200\u00d7630<\/strong> \u2014 the standard Open Graph \/ social share image.<\/li>\n\n\n\n<li><strong>1080\u00d71080<\/strong> \u2014 a square post.<\/li>\n\n\n\n<li><strong>1080\u00d71920<\/strong> \u2014 a story or phone wallpaper.<\/li>\n<\/ul>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/14.html\" style=\"width:100%;height:440px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Gradient Download Sizes Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">The images are drawn by the tool itself in your browser and include your layers, blend modes, opacity, grain and color space. <strong>SVG supports linear and radial layers<\/strong>; for conic or repeating gradients, use PNG. Need a full social card with text? Add the gradient as the background in the <a href=\"https:\/\/webdevpuneet.com\/og-image-generator\/\">OG Image Generator<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Share a gradient with a link<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Share link<\/strong> to copy a URL that reopens your exact gradient \u2014 every layer, stop, color space and setting is stored in the link itself after the <code>#<\/code>, so nothing is uploaded to a server. Send it to a teammate or client, or bookmark it as your own library of favorites. And because the tool <strong>auto-saves in your browser<\/strong>, you will find your last gradient waiting next time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fork &amp; Edit: make the gradient completely yours in My Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Copying a CSS snippet is perfect when you are dropping a gradient into an existing project. When you want to <em>build something around it<\/em>, use <strong>Fork &amp; Edit<\/strong>. Here is what happens:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click <strong>Fork &amp; Edit<\/strong> in the preview bar. <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/mycode\/\">My Code<\/a>, the free in-browser code editor on webdevpuneet.com, opens in a new tab.<\/li>\n\n\n\n<li>Your gradient arrives as a new snippet: a ready-made hero section in the <strong>HTML<\/strong> pane and the gradient, the readable text color, the button and any animation keyframes in the <strong>CSS<\/strong> pane, with a live preview beside them.<\/li>\n\n\n\n<li>Make it yours. Change the heading and button text, rename the classes, swap the hero for a card or a navbar, add your own fonts, drop in a script. The preview updates as you type.<\/li>\n\n\n\n<li>The snippet is saved in your browser, so it is still there tomorrow. You can back it up to a private GitHub Gist if you like.<\/li>\n\n\n\n<li>When it is ready, export it from My Code as a standalone HTML file, a React JSX component or a React + Tailwind component.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Nothing is uploaded when you fork: the generator hands the snippet to My Code through your browser&#8217;s local storage. Every demo in this article has the same <strong>Fork &amp; Edit<\/strong> button in its top bar, so you can start from any of them \u2014 the animated tiles, the CSS-variable theme switcher or the landing page below \u2014 and edit it into your own design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to use a generated gradient in your projects<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A gradient is just a <code>background<\/code> value, so it fits anywhere. Here is how it looks in the most common setups, and the demo below combines four generator exports \u2014 a layered mesh background with grain, gradient text, a gradient button and a gradient-border card \u2014 into one landing section.<\/p>\n\n\n\n<iframe src=\"https:\/\/webdevpuneet.com\/demos\/a1\/38\/15.html\" style=\"width:100%;height:480px;border:0;border-radius:10px;overflow:hidden;\" loading=\"lazy\" title=\"Gradients in a Real Landing Page Demo by webdevpuneet.com\"><\/iframe>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Plain HTML and CSS.<\/strong> Paste the CSS export into your stylesheet and add the class to any element. This works in WordPress themes, Webflow custom code, static sites.<\/li>\n\n\n\n<li><strong>Tailwind CSS.<\/strong> Paste the one-line class from the Tailwind tab. For a gradient you reuse a lot, put the CSS variable export in your global CSS and write <code>bg-[image:var(--gradient)]<\/code> in the markup.<\/li>\n\n\n\n<li><strong>React, Next.js and Vite.<\/strong> Use the React tab&#8217;s style object, or drop the CSS export into a CSS Module and import it.<\/li>\n\n\n\n<li><strong>Sass projects.<\/strong> Use the SCSS tab and reuse <code>$gradient<\/code> anywhere in your partials.<\/li>\n\n\n\n<li><strong>Design systems.<\/strong> Use the CSS Variable tab and define one custom property per brand gradient, as in the theme demo above.<\/li>\n\n\n\n<li><strong>Images and slides.<\/strong> Download a PNG or SVG and place it in Figma, Canva, PowerPoint or an <code>&lt;img&gt;<\/code> tag.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Looking for ready-made components that use gradients? Browse the <a href=\"https:\/\/webdevpuneet.com\/ui-snippets\/\">UI Snippets library<\/a> \u2014 over 2,000 copy-paste components, including gradient buttons, borders and hero sections.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tips for better CSS gradients<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default to OKLCH.<\/strong> It is the single biggest upgrade to a gradient between two distant colors. Keep sRGB for subtle, close-together colors.<\/li>\n\n\n\n<li><strong>Limit it to two or three colors.<\/strong> Gradients with many unrelated colors look busy. If you need richness, use layers instead of more stops.<\/li>\n\n\n\n<li><strong>Add a little grain to large backgrounds.<\/strong> Even 8\u201315% hides banding on big, smooth gradients.<\/li>\n\n\n\n<li><strong>Use Eased for overlays on photos.<\/strong> A dark-to-transparent gradient behind white text looks far more natural when eased.<\/li>\n\n\n\n<li><strong>Check contrast every time.<\/strong> Text on a gradient has to pass at its <em>worst<\/em> spot, not its average.<\/li>\n\n\n\n<li><strong>Keep the sRGB fallback line.<\/strong> It costs one line and protects older browsers.<\/li>\n\n\n\n<li><strong>Respect reduced motion.<\/strong> Wrap animation in a <code>prefers-reduced-motion<\/code> rule, and keep loops slow \u2014 6\u201312 seconds feels calmer than 2.<\/li>\n\n\n\n<li><strong>Keep animated areas small on low-end phones.<\/strong> Pulse (opacity) is the cheapest animation; Slide, Diagonal, Breathe and Hue Shift repaint more, so use them on a card or a button rather than a full-screen background.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Is the CSS gradient generator free?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. It is completely free with no sign-up, and the code and images you create are yours to use in personal and commercial projects. Everything runs in your browser, so your gradients, downloads and share links are generated on your device and never sent to a server.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I create a CSS gradient online?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open the generator, choose Linear, Radial or Conic, and edit the color stops: click the gradient bar to add one, drag a handle to move it, and use the color picker, hex field and opacity box to change it. Choose CSS, Tailwind, SCSS, CSS Variable or React above the code and click Copy, or download the gradient as a PNG or SVG.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is an OKLCH gradient and which browsers support it?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">OKLCH is a perceptual color space with lightness, chroma and hue. A gradient written as <code>linear-gradient(in oklch 90deg, \u2026)<\/code> stays bright and evenly spaced instead of going grey in the middle. It works in Chrome and Edge 111+, Safari 16.2+ and Firefox 127+, and the generator writes an sRGB fallback line first so older browsers still show a gradient.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I make a gradient with more than two colors?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click anywhere on the gradient bar to add a stop, then change its color. You can also click + Add to insert a stop halfway along the gradient. For richer results, add layers instead of piling on stops.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I make a radial or conic gradient?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pick Radial or Conic in the Type section. Radial gradients have an ellipse or circle shape and a size keyword; conic gradients have a start angle. For both, set the center with the X and Y sliders or by dragging it on the preview.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I make a CSS gradient animation?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open the Animate section and choose Slide, Diagonal, Hue Shift, Breathe, Pulse or Spin, then set the speed from 1 to 12 seconds. The CSS export includes the animation property and the @keyframes, ready to paste.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I get Tailwind or React code for my gradient?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. The Tailwind tab writes an arbitrary-value class that works in Tailwind v3 and v4, and the React tab writes a style object and a small component. There are also SCSS variable and CSS custom property exports.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do I make gradient text in CSS?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Switch the preview to Text. The export uses <code>background-clip: text<\/code> with the <code>-webkit-<\/code> prefixes Safari needs, plus <code>color: transparent<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Can I download a gradient as an image?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Pick a size \u2014 1920\u00d71080, 2560\u00d71440, a 1200\u00d7630 social image, a 1080\u00d71080 square or a 1080\u00d71920 story \u2014 and click PNG or SVG. SVG supports linear and radial layers; use PNG for conic or repeating gradients.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What happens when I click Fork &amp; Edit?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Your gradient opens in My Code as a new snippet, on a ready-made hero page with HTML and CSS panes and a live preview. It is saved in your browser, you can keep editing it, and you can export it later as an HTML file or a React component.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Try it yourself<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <a href=\"https:\/\/webdevpuneet.com\/gradient-generator\/\">CSS Gradient Generator<\/a>, pick a preset, switch to OKLCH, add a layer or some grain, and copy the code \u2014 or click Fork &amp; Edit and keep building. For more color and CSS tools, try the <a href=\"https:\/\/webdevpuneet.com\/color-palette-generator\/\">Color Palette Generator<\/a>, the <a href=\"https:\/\/webdevpuneet.com\/css-animation-generator\/\">CSS Animation Generator<\/a>, the <a href=\"https:\/\/webdevpuneet.com\/box-shadow-generator\/\">Box Shadow Generator<\/a> and the <a href=\"https:\/\/webdevpuneet.com\/mesh-gradient-generator\/\">Mesh Gradient Generator<\/a>, or see <a href=\"https:\/\/webdevpuneet.com\/css-tools\/\">all the free CSS tools<\/a> on webdevpuneet.com.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A CSS gradient is one line of code \u2014 until you want it to look good. The colors turn grey in the middle. A big background shows ugly bands. You want a soft glow on top of another gradient, a pie chart, an animated button, gradient text, a border that keeps its rounded corners \u2014 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":123,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","advanced_seo_description":"Free CSS gradient generator: linear, radial and conic gradients, OKLCH blending, grain, layers, animation and Tailwind export. 15 live demos, Fork & Edit.","jetpack_seo_html_title":"CSS Gradient Generator: OKLCH, Layers, Grain & Animation","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Free CSS Gradient Generator with 15 live demos.\n\nCreate linear, radial & conic gradients with OKLCH blending, grain, layers and animation. Fork & Edit and export to Tailwind CSS.\n\n#CSS #WebDev #Frontend #TailwindCSS","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-122","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","et-has-post-format-content","et_post_format-et-post-format-standard"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/phrh5V-1Y","jetpack_featured_media_url":"https:\/\/i0.wp.com\/webdevpuneet.com\/blog\/wp-content\/uploads\/2026\/10\/gradient-generator.png?fit=1200%2C800&ssl=1","_links":{"self":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":1,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/posts\/122\/revisions\/124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media\/123"}],"wp:attachment":[{"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevpuneet.com\/blog\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}