# CSS Gradient Builder — Gradient Types, Topic Guides, Framework Guides, Device Guides

For the full tool, see: [https://capytoolkit.com/tools/design/gradient-builder/](https://capytoolkit.com/tools/design/gradient-builder/)

## CSS Gradient Builder Reference
[CSS linear-gradient() Function](https://capytoolkit.com/tools/design/gradient-builder/reference/#linear-gradient): The CSS linear-gradient() function draws a straight color transition from start to end. Full syntax reference, color stop rules, hint positions, and angle coordinate guide.
[CSS radial-gradient() Function](https://capytoolkit.com/tools/design/gradient-builder/reference/#radial-gradient): The CSS radial-gradient() function draws a circular or elliptical gradient from a focal point. Full syntax with shape, size, and position arguments.
[CSS conic-gradient() Function](https://capytoolkit.com/tools/design/gradient-builder/reference/#conic-gradient): The CSS conic-gradient() function sweeps color around a center point. Syntax, from angle, at position, and hard-stop patterns for pie charts and spinners.
[CSS repeating-linear-gradient() Function](https://capytoolkit.com/tools/design/gradient-builder/reference/#repeating-linear-gradient): repeating-linear-gradient() tiles a gradient pattern across an element. Stop positioning, tile size calculation, and hard-stop stripe techniques.
[CSS repeating-conic-gradient() Function](https://capytoolkit.com/tools/design/gradient-builder/reference/#repeating-conic-gradient): repeating-conic-gradient() tiles a conic gradient around the center. Checkerboard, pinwheel, and starburst patterns with hard-stop techniques.
[CSS Gradient Color Stop Syntax](https://capytoolkit.com/tools/design/gradient-builder/reference/#color-stop-syntax): CSS gradient color stops control color position, hard transitions, and midpoint hints. Full syntax for percentage, length, and multi-position stop rules.

## Topic Guides
[CSS Gradient Text with background-clip](https://capytoolkit.com/tools/design/gradient-builder/css-gradient-text/): Apply a CSS gradient to text using background-image and background-clip: text. Browser support, fallback strategy, and live examples with the gradient builder.
[Animating CSS Gradients with @property](https://capytoolkit.com/tools/design/gradient-builder/css-gradient-animation/): Animate CSS gradient stops smoothly using @property custom properties. Browser support, fallback patterns, and OKLCH hue-rotation animations.
[CSS Mesh Gradient Technique](https://capytoolkit.com/tools/design/gradient-builder/css-mesh-gradient/): Build mesh-style gradients in CSS using multiple layered radial-gradient() values on the same background-image. No SVG or canvas required.
[Tailwind CSS v4 Gradient Utilities](https://capytoolkit.com/tools/design/gradient-builder/tailwind-v4-gradients/): Complete guide to Tailwind v4 gradient utilities. bg-linear-to-r, bg-radial, bg-conic, from-*, via-*, to-*, and in-oklch modifier reference.
[CSS Gradient Borders](https://capytoolkit.com/tools/design/gradient-builder/css-gradient-border/): Apply CSS gradient borders using border-image or background-clip masking. Both techniques, browser support comparison, and border-radius workaround.
[OKLCH Interpolation in CSS Gradients](https://capytoolkit.com/tools/design/gradient-builder/oklch-css-gradient/): Use OKLCH color space interpolation in CSS gradients with the in oklch modifier. How it eliminates grey midpoints and improves perceptual smoothness.
[CSS Gradients for Dark Mode UI](https://capytoolkit.com/tools/design/gradient-builder/dark-mode-css-gradient/): Design CSS gradients for dark mode using reduced chroma, lower lightness stops, and prefers-color-scheme media queries. Practical patterns for UI surfaces.
[CSS Background Patterns with Gradients](https://capytoolkit.com/tools/design/gradient-builder/css-gradient-patterns/): Build repeating CSS background patterns using gradient functions and background-size. Stripes, grids, dots, and diagonal tile techniques without images.
[Glassmorphism with CSS Gradients](https://capytoolkit.com/tools/design/gradient-builder/glassmorphism-css-gradient/): Implement the glassmorphism effect with CSS gradients, backdrop-filter blur, and translucent stops. Browser support and performance considerations.

## CSS Gradient Builder: Code Examples
[Export Figma Gradients to CSS](https://capytoolkit.com/tools/design/gradient-builder/code-examples/#figma-gradient-to-css): Copy CSS gradient code from Figma's Design panel. Linear, radial, and angular gradient fill types, hex vs OKLCH differences, and paste-ready output.
[CSS Gradients in React with Tailwind CSS v4](https://capytoolkit.com/tools/design/gradient-builder/code-examples/#react-tailwind-gradient): Apply CSS gradients in React using Tailwind CSS v4 gradient utilities. bg-linear, bg-radial, bg-conic, from-*, via-*, to-*, and in-oklch modifier patterns.
[CSS Gradient Backgrounds in Next.js](https://capytoolkit.com/tools/design/gradient-builder/code-examples/#nextjs-gradient-background): Apply CSS gradient backgrounds in Next.js using globals.css, CSS Modules, and the inline style prop. App Router and Pages Router patterns.
[CSS Gradients in Svelte Components](https://capytoolkit.com/tools/design/gradient-builder/code-examples/#svelte-css-gradient): Apply CSS gradients in Svelte using scoped style blocks, :global() selectors, and reactive $: gradient declarations. Practical patterns for Svelte 5.
[CSS Gradients in Vue.js 3 Components](https://capytoolkit.com/tools/design/gradient-builder/code-examples/#vue-css-gradient): Apply CSS gradients in Vue.js 3 using scoped styles, v-bind() in CSS for reactive stops, and computed() gradient strings in the Composition API.
[CSS Gradients in styled-components](https://capytoolkit.com/tools/design/gradient-builder/code-examples/#styled-components-gradient): Define CSS gradients in styled-components using template literal syntax, the css helper for reusable gradient fragments, and ThemeProvider color tokens.
[CSS Gradient Mixins and Functions in SCSS](https://capytoolkit.com/tools/design/gradient-builder/code-examples/#sass-gradient-mixins): Write reusable CSS gradient code with SCSS mixins, @function stop calculators, @each loops for multi-stop generation, and CSS custom property output.

## Device Guides
[CSS Gradient Rendering on MacBook Pro M4](https://capytoolkit.com/tools/design/gradient-builder/macbook-pro-m4-gradient/): How CSS gradients render on the MacBook Pro M4 Liquid Retina XDR display. P3 wide-gamut color, Safari WebKit behavior, and OKLCH gradient output on 120 Hz ProMotion.
[CSS Gradient Rendering on MacBook Air M4](https://capytoolkit.com/tools/design/gradient-builder/macbook-air-m4-gradient/): How CSS gradients render on the MacBook Air M4 Liquid Retina display. 100% P3 color space, Safari WebKit behavior, and sRGB vs P3 gradient comparison.
[CSS Gradient Rendering on iPhone 17 Pro](https://capytoolkit.com/tools/design/gradient-builder/iphone-17-pro-gradient/): How CSS gradients render on the iPhone 17 Pro Super Retina XDR display. Safari mobile WebKit, DCI-P3 color, and mobile gradient optimization tips.
[CSS Gradient Rendering on Samsung Galaxy S25](https://capytoolkit.com/tools/design/gradient-builder/samsung-galaxy-s25-gradient/): How CSS gradients render on the Samsung Galaxy S25 AMOLED display. Chrome Blink engine, DCI-P3 color, and OLED-specific gradient design considerations.
[CSS Gradient Rendering on Dell XPS 16 (2026)](https://capytoolkit.com/tools/design/gradient-builder/dell-xps-16-gradient/): How CSS gradients render on the Dell XPS 16 Tandem OLED display. Chrome and Edge Blink engine, HDR 1000 nits, and DCI-P3 gradient rendering.