PNGraft
49+ CSS Gradients

Free CSS Gradient Collection

Browse 49+ beautiful CSS gradients. Click to copy the code. Free for websites, apps, Figma, Tailwind CSS and all design projects.

49 gradients found

Sunrise

linear-gradient(135deg, #f093fb 0%, #f5576c 100%)

Warm

Flamingo

linear-gradient(135deg, #f5af19 0%, #f12711 100%)

Warm

Ember

linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)

Warm

Peach Sunset

linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)

Warm

Golden Hour

linear-gradient(135deg, #f7971e 0%, #ffd200 100%)

Warm

Warm Flame

linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)

Warm

Lava Flow

linear-gradient(135deg, #f83600 0%, #f9d423 100%)

Warm

Arctic

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

Cool

Frozen

linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)

Cool

Ice Crystal

linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)

Cool

Winter Sky

linear-gradient(135deg, #accbee 0%, #e7f0fd 100%)

Cool

Frost

linear-gradient(135deg, #c3cfe2 0%, #f5f7fa 100%)

Cool

Cool Blues

linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%)

Cool

Glacier

linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)

Cool

Cotton Candy

linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)

Pastel

Soft Lilac

linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)

Pastel

Baby Blue

linear-gradient(135deg, #f5efef 0%, #a8caba 100%)

Pastel

Spring Blossom

linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)

Pastel

Lavender Dream

linear-gradient(135deg, #c9d6ff 0%, #e2e2e2 100%)

Pastel

Bubblegum

linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)

Pastel

Candy Floss

linear-gradient(135deg, #f6d365 0%, #fda085 100%)

Pastel

Midnight

linear-gradient(135deg, #232526 0%, #414345 100%)

Dark

Dark Knight

linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)

Dark

Obsidian

linear-gradient(135deg, #000000 0%, #434343 100%)

Dark

Deep Space

linear-gradient(135deg, #000428 0%, #004e92 100%)

Dark

Void

linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%)

Dark

Charcoal

linear-gradient(135deg, #3a3d40 0%, #181719 100%)

Dark

Shadow Night

linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)

Dark

Electric Violet

linear-gradient(135deg, #fc00ff 0%, #00dbde 100%)

Neon

Neon Glow

linear-gradient(135deg, #b721ff 0%, #21d4fd 100%)

Neon

Cyber Punk

linear-gradient(135deg, #f857a6 0%, #ff5858 100%)

Neon

Laser Lime

linear-gradient(135deg, #00f260 0%, #0575e6 100%)

Neon

Plasma

linear-gradient(135deg, #f7797d 0%, #FBD786 50%, #C6FFDD 100%)

Neon

Neon Pink

linear-gradient(135deg, #f953c6 0%, #b91d73 100%)

Neon

Toxic Green

linear-gradient(135deg, #56ab2f 0%, #a8e063 100%)

Neon

California Sunset

linear-gradient(135deg, #e65c00 0%, #F9D423 100%)

Sunset

Malibu

linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)

Sunset

Tropical Dusk

linear-gradient(135deg, #fa709a 0%, #fee140 100%)

Sunset

Desert Sand

linear-gradient(135deg, #e6b980 0%, #eacda3 100%)

Sunset

Horizon

linear-gradient(135deg, #ffc3a0 0%, #FFAFBD 100%)

Sunset

Dusk

linear-gradient(135deg, #2c3e50 0%, #fd746c 100%)

Sunset

Sunfire

linear-gradient(135deg, #FF4E50 0%, #F9D423 100%)

Sunset

Deep Ocean

linear-gradient(135deg, #1CB5E0 0%, #000046 100%)

Ocean

Aquamarine

linear-gradient(135deg, #1A2980 0%, #26D0CE 100%)

Ocean

Tidal Wave

linear-gradient(135deg, #43cea2 0%, #185a9d 100%)

Ocean

Sea Breeze

linear-gradient(135deg, #2BC0E4 0%, #EAECC6 100%)

Ocean

Coral Reef

linear-gradient(135deg, #ff9966 0%, #ff5e62 100%)

Ocean

Pacific

linear-gradient(135deg, #0052D4 0%, #4364F7 50%, #6FB1FC 100%)

Ocean

Atlantis

linear-gradient(135deg, #0082c8 0%, #667db6 50%, #0082c8 100%)

Ocean

Free CSS Gradient Backgrounds for Your Projects

PNGraft offers a hand-curated collection of 49+ beautiful CSS gradients organized into categories like Warm, Cool, Pastel, Dark, Neon, Sunset, and Ocean. Each gradient comes with ready-to-use CSS code that you can copy with a single click and paste directly into your stylesheet.

These gradients work perfectly as website backgrounds, hero sections, card overlays, button styles, and social media graphics. Compatible with CSS, Tailwind CSS, React, Vue, Next.js, Figma, and all modern frameworks. All gradient codes are free for personal and commercial use.

Use the search bar to find gradients by name or browse by category. Each gradient card shows a live CSS preview alongside the full gradient code. Copy, customize, and create stunning designs instantly without any design tools required.

Frequently Asked Questions

How do I use these CSS gradients?

Click the copy button on any gradient card to copy the CSS code. Paste it as a background property in your CSS file, Tailwind config, or any design tool that supports CSS gradients.

Are these gradients free to use?

Yes, all CSS gradient codes on PNGraft are 100% free for personal and commercial use. No attribution required.

Can I customize these gradients?

Absolutely! Copy the CSS code and modify the colors, angle, or stops to match your brand. The gradient code is standard CSS that works in all modern browsers.