ImagesProcessado no seu navegador

CSS Gradient Generator

Create linear, radial, and conic gradients visually and export them as CSS or Tailwind instantly.

0 of 3 uses today · 3 remaining. Go Pro and remove the limit.

Upgrade

Type

linear

Stops

3/8

Export

CSS + Tailwind

Mesh

Mesh active

Preview & code

Base colors

Color 01

#8C6A2D

Gradient starting base.

Color 02

#D3B06F

Gradient ending base.

CSS

background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);

Tailwind

bg-[radial-gradient(circle_at_28%_24%,_rgba(243,_223,_178,_0.2)_0%,_rgba(243,_223,_178,_0)_34%),_radial-gradient(circle_at_78%_68%,_rgba(192,_141,_59,_0.18)_0%,_rgba(192,_141,_59,_0)_42%),_linear-gradient(135deg,_#8C6A2D_0%,_rgba(211,_176,_111,_0.96)_52%,_#2B1D08_100%)]

Stops & composition

Color stops

#8C6A2D

0% · 100%

Position

Opacity

#D3B06F

52% · 96%

Position

Opacity

#2B1D08

100% · 100%

Position

Opacity

Geometry

Type & direction

Type

Angle

135°

Center & options

Center X

50%

Center Y

50%

Repeating

Useful cadence for dividers, patterns, and product lines.

Advanced outputs

Mesh overlay

Overlay for visual heroes and surfaces with depth.

2 layers

background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);

Token pack

CSV with Hero, Surface, and Accent ready for implementation.

:root { --gradient-stop-1: #8C6A2D; --gradient-stop-2: #D3B06F; --gradient-stop-3: #2B1D08; --gradient-css: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%); }

§ How to use

How to generate a CSS gradient visually

Build linear, radial or conic gradients with a live preview and export ready-to-paste CSS.

Choose the gradient type
Linear (the most common, directional transitions), Radial (from the center outward) or Conic (swept arc — great for charts).
Set colors and stops
Add two or more colors. Drag to change each stop's position. Colors in HEX, RGB or HSL.
Adjust angle or center
Linear: 0deg (vertical), 90deg (horizontal), 45deg (diagonal). Radial: set the origin in pixels or %.
Copy the CSS
Code ready to paste into your stylesheet, with -webkit/-moz prefixes for maximum compatibility.