# [Import CSS Gradients](<https://www.figma.com/community/plugin/1601921616863449065/import-css-gradients>)

Figma plugin that converts CSS gradient code into native Figma fills — paste any linear, radial, or conic gradient and apply it instantly.

Free·Figma Plugins·Figma

Free·Figma Plugins·Figma

![Import CSS Gradients preview 1](<https://creatorstoolbox.com/images/import-css-gradients-thumbnail.png>)

## What is Import CSS Gradients?

Import CSS Gradients is a Figma plugin that lets you paste CSS gradient code and instantly convert it into native Figma gradient fills. Supports linear-gradient, radial-gradient, and conic-gradient syntax including complex multi-stop gradients. Instead of manually recreating gradients color stop by color stop, just copy the CSS from your browser DevTools, a CSS generator, or any code snippet and paste it into the plugin.

The gradient is parsed and applied to the selected layer as a native Figma fill, preserving all color stops, angles, and positions.

## Features

- Paste CSS gradients directly into Figma

- Supports linear, radial & conic gradients

- Instant conversion to native Figma fills

- No manual color stop recreation

## FAQs

Common questions about Import CSS Gradients

What gradient types are supported?

The plugin supports linear-gradient, radial-gradient, and conic-gradient CSS syntax including multi-stop gradients.

Is this plugin free?

Yes, it's free to install and use from the Figma Community.

Similar Launches

[![Lil Pixel Icon](<https://s3-alpha.figma.com/profile/4094c94f-ece5-4943-8dad-7642534da0e0>)

Lil Pixel Icon

Figma plugin for creating pixel-art style icons — generate retro, pixelated icons directly in your design files.](<https://creatorstoolbox.com/tools/lil-pixel-icon>)[![Lil Pixel Icon](<https://s3-alpha.figma.com/profile/4094c94f-ece5-4943-8dad-7642534da0e0>)

Lil Pixel Icon

Free pixel-art icon plugin for Figma — generate retro pixelated icons for your design projects.](<https://creatorstoolbox.com/tools/lil-pixel-icon-resource>)[![Cursor for Figma](<https://www.google.com/s2/favicons?domain=cursor.com&sz=128>)

Cursor for Figma

Figma plugin for Cursor — inspect your design system, find the right components, variables, and styles, then write directly to Figma as editable layers.](<https://creatorstoolbox.com/tools/cursor-figma>)[![LottieFiles for Figma](<https://creatorstoolbox.com/images/logos/lottiefiles-figma-82cdd465d765831e9c78f06070c30c43de7ea05ed3c1ee332db9581c33fcc63f.svg>)

LottieFiles for Figma

Discover, create, and export Lottie animations directly inside Figma — browse thousands of free animations and add them to your designs.](<https://creatorstoolbox.com/tools/lottiefiles-figma>)[![Moodboard 3000](<https://creatorstoolbox.com/images/moodboard-3000-logo.jpeg>)

Moodboard 3000

Figma plugin for building moodboards fast — drag, drop, and arrange images, colors, and references on a visual board.](<https://creatorstoolbox.com/tools/moodboard-3000>)

---
Canonical source: https://creatorstoolbox.com/tools/import-css-gradients