How to Create CSS Gradients: Linear, Radial, and Conic
CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control over color stops, direction, and shape.
Key Takeaways
- CSS gradients are a type of `background-image`, not a color.
- Linear gradients transition colors along a straight line.
- Radial gradients emanate from a center point outward.
- Conic gradients rotate colors around a center point (like a color wheel).
- Color stops control where each color appears in the gradient:
CSS Minifier
Gradients as Backgrounds
CSS gradients are a type of background-image, not a color. This means you can layer them with other backgrounds, apply them to text, and animate them with transitions.
Linear Gradients
Linear gradients transition colors along a straight line. The direction can be specified as an angle (e.g., 45deg) or keyword (e.g., to right).
Common patterns:
linear-gradient(to right, #3B82F6, #8B5CF6)— horizontal blue to purple.linear-gradient(135deg, #F43F5E, #F97316)— diagonal pink to orange.linear-gradient(to bottom, transparent, black)— fade to black overlay.
Radial Gradients
Radial gradients emanate from a center point outward. You control the shape (circle or ellipse), size, and center position.
Common patterns:
radial-gradient(circle, #3B82F6, transparent)— spotlight effect.radial-gradient(ellipse at top, #1E293B, #0F172A)— subtle header vignette.
Conic Gradients
Conic gradients rotate colors around a center point (like a color wheel). They're useful for pie charts, progress indicators, and decorative effects.
Color Stop Positioning
Color stops control where each color appears in the gradient:
linear-gradient(to right, blue 0%, purple 50%, pink 100%)— evenly distributed.linear-gradient(to right, blue 0%, blue 30%, purple 30%)— hard color boundary at 30%.
Performance Note
CSS gradients are rendered by the browser and don't require HTTP requests. They're always faster than loading gradient image files and scale perfectly to any resolution.
Alat Terkait
Format Terkait
Panduan Terkait
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units is essential for building responsive, accessible interfaces.
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and how to combine them for robust, responsive page layouts.
Troubleshooting CSS Specificity Conflicts
When CSS rules unexpectedly override each other, specificity is usually the culprit. This guide explains how specificity is calculated and provides strategies for managing it in growing codebases.
CSS Custom Properties (Variables) Best Practices
CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS variables effectively in production applications.
How to Build Responsive Layouts Without Media Queries
Modern CSS provides intrinsic sizing techniques that create responsive layouts without breakpoint-based media queries. Learn how to use clamp(), min(), max(), container queries, and fluid grids for truly adaptive designs.
How to Create CSS Animations Without JavaScript
CSS animations and transitions can create engaging UI effects without JavaScript. Learn keyframes, transitions, and performance-optimized animation techniques.
How to Build a CSS Color Palette Generator
Creating consistent color palettes is essential for design systems. Learn how to generate HSL-based palettes and CSS custom property scales.
How to Minify CSS for Production
CSS minification removes whitespace and comments to reduce file size. Learn safe minification techniques that don't break your styles.
Tailwind CSS vs Bootstrap vs Vanilla CSS
Choosing a CSS approach affects development speed, bundle size, and design flexibility. Compare utility-first, component-based, and custom CSS strategies.
CSS Container Queries vs Media Queries
Container queries let components respond to their container's size instead of the viewport. Learn when to use each approach for responsive design.
Troubleshooting CSS Layout Overflow and Scrollbar Issues
Unexpected horizontal scrollbars and content overflow are common CSS frustrations. Learn systematic approaches to finding and fixing overflow problems.
Troubleshooting CSS Dark Mode Transitions
Dark mode implementation can cause flash-of-unstyled-content (FOUC), inconsistent colors, and transition glitches. Learn how to fix them.
CSS Performance Optimization Best Practices
CSS affects page rendering speed more than developers realize. Learn how to reduce render-blocking, optimize selectors, and minimize layout thrashing.
CSS Logical Properties for International Layouts
Use CSS logical properties for layouts that work correctly in left-to-right, right-to-left, and vertical writing modes.
CSS Selector Specificity Deep Dive
Master CSS specificity calculation, understand the cascade, and avoid specificity wars in large projects.
How to Write CSS for Email Clients
Handle the unique CSS constraints of email clients including Outlook, Gmail, Apple Mail, and mobile clients.
CSS Architecture: BEM, SMACSS, and ITCSS Compared
Large CSS codebases become unmaintainable without architecture. Compare the three most popular CSS methodologies and learn which suits your project.
CSS Naming Conventions: BEM vs SMACSS vs Atomic
Compare CSS naming methodologies and choose the right approach for your project size and team.
How to Build CSS-Only UI Components
Create interactive UI elements like toggles, accordions, tabs, and tooltips using only CSS — no JavaScript required.
How to Create Accessible CSS Focus Styles
Focus indicators help keyboard users navigate your interface. Learn how to create visible, attractive focus styles that meet WCAG requirements without compromising design.
CSS Print Stylesheets: Making Web Pages Printer-Friendly
Web pages printed without a print stylesheet produce wasteful, unreadable output. Learn how to create CSS that makes your content look great on paper.
How to Generate Gradients for Web Design
Create smooth CSS gradients with proper color interpolation, avoiding muddy midpoints and banding artifacts.
CSS Grid vs Flexbox: Layout Strategy Guide
Decide between CSS Grid and Flexbox for different layout patterns with practical examples.
Troubleshooting CSS Z-Index Stacking Issues
Z-index doesn't always work as expected because of stacking contexts. Learn how stacking contexts are created, how they affect z-index, and how to debug layering issues.
CSS Container Queries: Responsive Components Guide
Use container queries to create truly responsive components that adapt to their container size.
Web Fonts Loading Strategy for Fast Page Rendering
Web fonts can delay text rendering by seconds. Learn the optimal loading strategy to balance visual quality with performance using preload, font-display, and fallback stacks.
Troubleshooting CSS Grid Layout Alignment Issues
CSS Grid is powerful but its alignment behavior can be confusing when items don't land where you expect. This guide diagnoses the most common Grid alignment problems and provides concrete fixes for each scenario.