Css Magician is loading ...

Selected ElementUpdate by CLASS

Only update that element
Normal::before::after
No state:hover

Border

All Borders Radius

!Top Left
!Top Right
!Bottom Right
!Bottom Left
All Borders Width

!Left
!Top
!Right
!Bottom


All Colors

!Left
!Top
!Right
!Bottom

Text

!Color
Use Gradient



!Hover

!Font
!Font Size

!Line Height

!Bold!Italic


!----- Shadow -----

Horizontal
Vertical
Blur
Color

Background

!Color
Use Gradient




!Hover Color

Upload a background Image
Choose a background Image
!

!Repeat X-YNo RepeatRepeat XRepeat Y

!ScrollFixed

!autocovercontain

!Width
Height
!Left Position
!Top Position

Margins / Paddings

All Margins
!Left
!Top
!Right
!Bottom
All Paddings
!Left
!Top
!Right
!Bottom

Width / Height

!Width
Pixels
!Height
Pixels
!Min-Width
Pixels
!Max-Width
Pixels
!Min-Height
Pixels
!Max-Height
Pixels

Box Shadow

!
Vertical
Horizontal
Blur
Spread
Shadow Color

Position

!Top
!Left
!Right
!Bottom
!Z-Index
!Position relativeWarning: Only Update that element not selected

Transform

!
Scale
Rotate
Translate X
Translate Y
Skew X
Skew Y

Simple Animation

When

Do Animation

Infinite loop

Speed

Test Animation

SVG

Stroke Color
Fill Color
Stroke Width

Custom CSS

Custom CSS

Description

Description on the update

Add New Block

Where to put the Block

Create new Block
Update Products Miniatures

Hide Block Editor
Enable Dom Inspector
Css Magician
When a submenu is open, click the CTRL key to force it to remain open
V.2.0.3
CSS EDITOR
JAVASCRIPT EDITOR
Simply click on the widget you want to use. It will be added in the current column. Css Magician Widgets
Prestashop Modules








All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Choose Audio

Upload Audio (only MP3)
Choose an Image

Upload an Image
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)


Open in a new tab








All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)







All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Use Float Widget

Use Gradient

Choose a background Image

Upload a background Image
Choose a background Video

Upload a background Video
Use Simple Css Parallax
Use Real Parallax






All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)





Counter Countdown
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)

All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)

Display %


All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)

Horizontal Flip
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)

All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Add Share Button

All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)

All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)

All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)

Infinite Loop
Reverse Yoyo


Stop Animation (to work on characters)
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Choose an Image

Upload a Background Image


px

All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Choose an Image

Upload an Image


Inverse the Cx value from 0 to 100 and inversely when you switch from left to right and right to left.


Inverse the value from 0 to 100 and inversely when you switch from left to right and right to left.

Go to the line when you reach the end of the container.
Otherwise, you will have a break and the content will be outside of the container.
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Choose an Image

Upload an Image
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)


Simply click on the columns layout you want to use.
It will be possible to update it exactly as you want in the Grid Editor.
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Scroll text from Right To Left
Stop Animation (to work on text)
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)

Origin

Your Original Template

Style 1
-20% Product Name

Product Name

Product Short Description
20.00 € 16.00 €
Style 2
-20% Product Name

Product Name

Product Short Description
20.00 € 16.00 €
Style 3
-20% Product Name

Product Name

Product Short Description
20.00 € 16.00 €
Style 4
-20% Product Name

Product Name

Product Short Description
20.00 € 16.00 €
Style 5
-20% Product Name

Product Name

Product Short Description
20.00 € 16.00 €
Style 6
-20% Product Name

Product Name

20.00 € 16.00 €
Style 7
-20%
Product Name

Product Name

20.00 € 16.00 €
Style 8
-20% Product Name

Product Name

20.00 € 16.00 €
Style 9
-20% Product Name

Product Name

20.00 € 16.00 €
Style 10
-20% Product Name

Product Name

20.00 € 16.00 €
Style 11
-20%
Product Name

Product Name

Product Short Description
20.00 € 16.00 €
Style 12
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 13
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 14
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 15
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 16
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 17
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 18
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 19
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 20
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 21
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 22
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 23
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 24
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description
Style 25
-20%
Product Name

Product Name

20.00 € 16.00 €
Product Short Description

All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
All Margins
Left

Top

Right

Bottom
Vertical Margins

Horizontal Margins

Use Gradient
Choose a background Image

Upload a background Image
Choose a background Video

Upload a background Video

Add a particles background
Use Simple Css Parallax
Display Navigation
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Choose SVG

Upload SVG
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)




None Box Open Box Fill Twirl Box Slide Left
Box Slide Right Box Slide Up



All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Choose a Background Image

Upload a Background Image
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)
Choose a Video

Video name or url (*.mp4, youtube, vimeo, dailymotion)
Upload a Video (only MP4)
Controls
Autoplay
Loop
Mute
All others styles can to be updated with Css Magician Stylizer.





(learn more on the eases functions)

Terms and conditions of use

Rule 1

Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Rule 2

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamю

Rule 3

Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamю