Extract CSS code from Illustrator designs

Last updated on Oct 22, 2026

Learn how to use Adobe Illustrator's CSS Properties panel to generate web-ready CSS code from vector artwork and export it for web development.

When you design HTML page layouts in Illustrator, generate CSS code that defines the appearance and positioning of your design elements for faster web development.

CSS extraction transforms your Illustrator artwork into code that replicates text, colors, gradients, borders, and other visual properties. Name objects in the Layers panel before extraction to generate maintainable code with meaningful class names.

The CSS Properties panel generates standards-based code from your vector artwork. You can extract code for individual objects, multiple selections, or entire layouts, then copy it to your clipboard or export it as a standalone CSS file.

Open the CSS Properties panel

Select Window > CSS Properties to display the panel.

Note

Give unique and descriptive names to objects in the Layers panel before extracting code.

Generate CSS code for objects

To display the generated CSS code in the CSS Properties panel:

One object: Select an object on the artboard to display its CSS code automatically.
Multiple objects: Hold Shift and select multiple objects, and then select Generate CSS.
All objects: Select Ctrl + A (Windows) or Command + A (macOS), then select Generate CSS.

The panel displays the generated CSS code organized by object name, showing properties like background gradients, borders, dimensions, and color values. A warning indicator appears if any visual effects cannot be converted to standard CSS.

Copy or export CSS codes

To copy specific code sections, select the code in the CSS Properties panel and select Copy Selected Style.

Copy all CSS code:

Clear the selection on the artboard.
Select Copy Selected Style to copy all code to the clipboard.

Export selected CSS code:

Select the code in the CSS Properties panel.
Select the CSS Properties panel menu icon , then select Export Selected CSS.

Export all CSS code:

Clear the selection on the artboard.
Select the CSS Properties panel menu icon, then select Export All.

When you export CSS code, specify the required options in the CSS Export Options dialog.pecific code selections:

Select the code in the CSS Properties panel.
Select Copy Selected Style to copy it to the clipboard.

Understanding generated CSS output

Illustrator generates CSS code that defines visual properties using standard CSS syntax. Here's a simplified example of CSS code for a gradient-filled rectangle:

css .GRADIENT-BOX { background: linear-gradient(90deg, rgba(255,242,0,1) 0%, rgba(237,28,36,1) 100%); border-style: solid; border-color: rgba(35,31,32,1); border-width: 1px; }

For objects with text formatting, Illustrator generates font properties:

css .NormalCharacterStyle { font-family: "Myriad Pro"; font-size: 12px; }

Design with precision in Illustrator
Bring your ideas to life with vector graphics tools built for creative freedom and accuracy.

Open the app

Adobe PDF presets

Learn

Learn with step-by-step video tutorials and hands-on guidance right in the app.

Community

Join discussions, find answers, learn from experts, and share your knowledge.

Adobe Home

Access your favorite Creative Cloud apps, services, file management, and more.