Extract pattern photoshop in image or generate with css?

Question

Is there any way to save as png the pattern:

Blending Options > Pattern Overlay

or some way to grab the pattern layer and generate css ?

Thanks.

Answer 1

Go to layer > New fill layer > pattern.

Create your pattern.

Then, go to file > save for web then select png and export.

To convert it into a css, when you save for web, select HTML and images option under dropdown, this will create html and images for your psd file. Open this HTML in a WYSIWYG editor and define the CSS for the created pattern.

There is no hack for directly converting psd patterns to css.

Answer 2

• Click the "Paint Bucket" tool.

• Select "Pattern" from the options.

• Rollover the pattern thumbnail in the options panel. It will tell you the pixel dimensions of the pattern.

• Make a new new file at the dimensions listed from the rollover. Apply the pattern.

• Save