Css Magician is loading ...

Selected Element Update 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-Y No Repeat Repeat X Repeat Y

! Scroll Fixed

! auto cover containe

! 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 relative Warning: 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

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








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)

  • None
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)

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)

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 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)
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)


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)

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

Horizontal Flip
Add a Particles Background


Use Simple Css Parallax
Use Real 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)


Use Gradient for font color


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)