CSS gradient snippets you can copy and paste

Just changing a solid background to a gradient makes a page look surprisingly rich. This article gathers the basic way to write linear-gradient plus stylish color schemes and applied techniques you can use as-is, all with live demos. Copy them and just swap the color codes.

The basic way to write it

Write a gradient in background as linear-gradient(direction, color1, color2). Just pick two colors and line them up.

background: linear-gradient(135deg, #ff8a3d, #ff5e78);

135deg is the direction the color flows. 0deg is bottom to top, 90deg is left to right, 180deg is top to bottom. When in doubt, 135deg, flowing from top-left to bottom-right, looks the most natural.

8 color schemes you can use as-is

“Which two colors you connect” is everything in a gradient. Here are 8 well-matched combinations. Copy the one line you like.

/* Sunset */ background: linear-gradient(135deg, #ff8a3d, #ff5e78);
/* Ocean */ background: linear-gradient(135deg, #2193b0, #6dd5ed);
/* Fresh green */ background: linear-gradient(135deg, #56ab2f, #a8e063);
/* Night sky */ background: linear-gradient(135deg, #232526, #414345);
/* Peach */ background: linear-gradient(135deg, #ffecd2, #fcb69f);
/* Soda */ background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
/* Lavender */ background: linear-gradient(135deg, #a18cd1, #fbc2eb);
/* Sunrise */ background: linear-gradient(135deg, #f6d365, #fda085);

The trick is to connect two colors that are close on the color wheel. “Next-door” combinations like orange and pink, or blue and light blue, connect cleanly without the middle turning muddy.

Applied techniques

Radial gradient

radial-gradient spreads out from the center. It gives a soft sense of depth, like a spotlight.

background: radial-gradient(circle at 50% 30%, #6dd5ed, #2193b0 70%);

circle at 50% 30% is the position of the light’s center (50% across, 30% down). Shifting the center up a little gives a natural three-dimensional feel, as if lit from above.

Gradient text

Paint the heading text itself with a gradient—a technique for those “here it counts” moments.

.gradient-text {
  background: linear-gradient(135deg, #ff8a3d, #ff5e78);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

The mechanism is “clip the background gradient into the shape of the text, then make the text color transparent so the background shows through.” The three lines form a single technique, so copy them together.

A full-screen hero background

Painting the first screen a visitor sees (the first view) with a gradient makes it feel like a landing page all on its own.

.hero {
  min-height: 100vh;
  background: linear-gradient(160deg, #7c5cff, #ff5e78);
}

100vh means “the full height of the screen.” Making the text on top of the gradient white and lowering its opacity a little keeps it from feeling noisy.

A slowly moving gradient background

Make the gradient a bit large, then use an animation to slowly shift the background position back and forth. The kind of motion you only notice if you stare is the most elegant.

.animated {
  background: linear-gradient(135deg, #6dd5ed, #7c5cff, #ff5e78);
  background-size: 300% 300%;
  animation: flow 6s ease-in-out infinite alternate;
}
@keyframes flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

The mechanism is to make the background three times bigger with background-size: 300%, then move the position of the visible window (background-position).

Stripe pattern

With repeating-linear-gradient, you can draw stripes using the gradient mechanism. The key is not to blur the color transition—split it at the same position.

background: repeating-linear-gradient(
  45deg,
  #ff8a3d 0 16px,
  #ffe8d6 16px 32px
);

#ff8a3d 0 16px means “fill this color solidly from 0 to 16px.” Because the boundary isn’t blurred, you get crisp stripes. Change the numbers and the stripe width changes.

A fan-shaped gradient (conic-gradient)

conic-gradient is a gradient where the color changes all the way around a center point, like the hand of a clock. Just line up the color stops and you can even use it for a simple pie chart.

background: conic-gradient(
  #ff8a3d 0 40%,
  #7c5cff 40% 70%,
  #2ec46f 70% 100%
);

0 40% means “use this color for the 0%–40% range.” If linear-gradient is a straight line and radial-gradient is a circle, it’s easier to keep them straight if you remember conic-gradient as filling by angle, like a protractor.

A checklist for when a gradient looks wrong

• It doesn’t show up at all → Did you write it in background-color? A gradient goes in background
• The text disappeared with gradient text → The two lines background-clip: text and -webkit-background-clip: text are both required as a set
• The middle is muddy and ugly → Are you connecting distant hues? Slipping one intermediate color in between makes it clean
• The gradient doesn’t change on button hover → A background gradient can’t transition gradually with transition. The standard workaround is to layer a semi-transparent panel on top and change its opacity

Summary

1. The basic is linear-gradient(135deg, color1, color2)—connecting two nearby hues keeps it elegant
2. Text clipping (background-clip: text) and a slowly moving background can create those key moments
3. A gradient is treated as an “image,” not a “color”—you can’t write it in background-color

Just changing one solid hero or button to a gradient shifts the whole mood of a page. Start by trying one of the 8 color schemes.