Privvert - private browser-based file toolsPrivvert

Gradiente CSS

Lineal y radial

Sobre esta herramienta

Build CSS gradients - linear, radial or conic - with multiple color stops, then copy production-ready CSS or Tailwind code. Useful for hero backgrounds, button effects, decorative panels, and any place a flat color feels too plain.

Privvert supports OKLCH interpolation for gradients with cleaner mid-tones (no muddy gray crossover that you get with naive sRGB gradients). Live preview, drag-to-position color stops, copy CSS in one click.

Características

  • Linear, radial and conic gradients
  • Unlimited color stops
  • Drag-to-position stops on a timeline
  • Angle (linear/conic) and position (radial) controls
  • OKLCH or sRGB interpolation
  • CSS and Tailwind output
  • Browser-only - gradients never uploaded
  • Adds stops at any position with one click

Cómo usarla

  1. Add color stops and adjust their positions.
  2. Pick gradient type (linear / radial / conic).
  3. Set angle or position as needed.
  4. Copy the CSS or Tailwind code.
🔒 100% privado

Todo sucede dentro de tu navegador usando JavaScript y WebAssembly. Tus archivos nunca se suben a un servidor, nunca se almacenan y nosotros nunca los vemos.

Preguntas frecuentes

Does it support OKLCH gradients?

Yes - interpolation in OKLCH avoids the muddy mid-tones common with sRGB gradients. Modern browsers support 'in oklch' as a CSS gradient interpolation hint.

What's the difference between linear, radial and conic?

Linear goes in a straight line (most common). Radial spreads from a center point outward in circles. Conic sweeps around a point like a clock - used for pie-chart-style decorations.

Can I use it as a button background?

Yes - copy the linear gradient CSS into your button's background-image. For animated gradients, animate the background-position.

Will it work in older browsers?

Linear and radial gradients work in every browser made since 2012. Conic gradients need a more recent browser; check caniuse.com for current support.

Why do my gradients look muddy in the middle?

Because sRGB interpolation passes through gray when blending complementary colors. Switch the interpolation to OKLAB or OKLCH for perceptually clean transitions - the middle stays vibrant rather than going through gray.

Can I export the CSS?

Yes. The tool generates the CSS background-image rule that exactly reproduces the gradient. Copy and paste into your stylesheet or design tool.