CSS Gradients Cheat Sheet

Gradients in CSS can add depth and visual appeal to your web designs. Here’s a cheat sheet for CSS gradients:

Linear Gradient

/* Simple Linear Gradient */
background: linear-gradient(to right, #ff7e5f, #feb47b);

/* Linear Gradient with Angles */
background: linear-gradient(45deg, #ff7e5f, #feb47b);

/* Linear Gradient with Color Stops */
background: linear-gradient(to right, #ff7e5f 0%, #feb47b 100%);

Radial Gradient

/* Simple Radial Gradient */
background: radial-gradient(circle, #ff7e5f, #feb47b);

/* Radial Gradient with Shape and Size */
background: radial-gradient(ellipse at center, #ff7e5f, #feb47b);

/* Radial Gradient with Color Stops */
background: radial-gradient(circle, #ff7e5f 0%, #feb47b 100%);

Repeating Gradient

/* Repeating Linear Gradient */
background: repeating-linear-gradient(to right, #ff7e5f, #feb47b 20%);

/* Repeating Radial Gradient */
background: repeating-radial-gradient(circle, #ff7e5f, #feb47b 20%);

Directional Gradient

/* Left to Right Gradient */
background: linear-gradient(to right, #ff7e5f, #feb47b);

/* Top to Bottom Gradient */
background: linear-gradient(to bottom, #ff7e5f, #feb47b);

/* Diagonal Gradient */
background: linear-gradient(45deg, #ff7e5f, #feb47b);

Color Stops

/* Multiple Color Stops */
background: linear-gradient(to right, #ff7e5f 0%, #feb47b 50%, #8e9eab 100%);

Gradient Overlays

/* Gradient Overlay on Image */
background: linear-gradient(to bottom, rgba(255, 126, 95, 0.7), rgba(254, 180, 123, 0.7)), url('your-image.jpg');

Conic Gradient (CSS4)

/* Conic Gradient (CSS4) */
background: conic-gradient(from 0deg at 50% 50%, #ff7e5f, #feb47b);

Mix Blend Mode

/* Mix Blend Mode with Gradient */
background: linear-gradient(to right, #ff7e5f, #feb47b);
mix-blend-mode: multiply;

Transparent Gradients

/* Transparent Linear Gradient */
background: linear-gradient(to right, rgba(255, 126, 95, 0.5), rgba(254, 180, 123, 0.5));

/* Transparent Radial Gradient */
background: radial-gradient(circle, rgba(255, 126, 95, 0.5), rgba(254, 180, 123, 0.5));

These examples cover various scenarios for creating gradients in CSS. Feel free to customize the colors, directions, and other parameters to suit your design needs.