CSSグラデーションの作り方：完全ガイド

CSS supports three gradient types:

Linear: Straight-line transition. background: linear-gradient(to right, #FF5733, #FFC300);

Radial: From center point. background: radial-gradient(circle, #FF5733, #FFC300);

Conic: Around a point. background: conic-gradient(#FF5733, #FFC300, #FF5733);

Create gradients visually with the NexTools gradient generator.

With the NexTools visual generator:

Step 1: Select colors with picker or enter HEX codes.

Step 2: Choose type (linear, radial, conic) and direction.

Step 3: Adjust color stop positions.

Step 4: Copy the generated CSS code.

For color format conversion, use the NexTools color converter.

Linear with angle: linear-gradient(135deg, #667eea 0%, #764ba2 100%)

Multiple stops: linear-gradient(to right, #f12711 0%, #f5af19 50%, #f12711 100%)

Radial with shape: radial-gradient(ellipse at top left, #667eea, transparent)

Conic for pie charts: conic-gradient(#FF5733 0% 25%, #FFC300 25% 50%, #36D7B7 50% 75%, #3498DB 75%)

Repeating: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px)

1. Mesh gradients: Multiple color points creating organic transitions.

2. Glassmorphism: Blurred backgrounds with subtle gradients. backdrop-filter: blur(20px);

3. Animated gradients: Smooth color transitions with @keyframes.

4. oklch() gradients: New CSS color space produces more natural gradients without the gray band.

5. Aurora/Northern Lights: Neon color gradients simulating aurora borealis.

Text gradient:

background: linear-gradient(to right, #f12711, #f5af19);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Border gradient:

border: 2px solid transparent;
background-image: linear-gradient(white, white), linear-gradient(to right, #f12711, #f5af19);
background-origin: border-box;
background-clip: padding-box, border-box;

For CSS shadows, complement with the NexTools box-shadow generator.

CSS gradients are ALWAYS preferable to gradient images:

• Size: CSS gradient ~100 bytes. Equivalent PNG: 5-50 KB.
• Scaling: CSS scales perfectly to any resolution. Images pixelate.
• Editable: Change a color = change one line of CSS.
• Cache: CSS caches with the stylesheet. Images need extra HTTP request.

Only exception: very complex mesh gradients (10+ points) may be more efficient as SVG.

Sunset: linear-gradient(to right, #f12711, #f5af19)

Ocean: linear-gradient(to right, #2193b0, #6dd5ed)

Purple: linear-gradient(to right, #667eea, #764ba2)

Mint: linear-gradient(to right, #00b09b, #96c93d)

Rose: linear-gradient(to right, #ee9ca7, #ffdde1)

Night: linear-gradient(to right, #0f0c29, #302b63, #24243e)

More palettes in the NexTools gradient generator.

Text over gradients can have readability issues:

• Variable contrast: Yellow-to-dark-blue gradient may have good contrast at one end and poor at the other.
• Solution: Add semi-transparent overlay: background: linear-gradient(...), rgba(0,0,0,0.5);
• WCAG: Minimum contrast (4.5:1) must be met at ALL points with text, not just on average.

Verify contrast with the percentage calculator and WebAIM tools.